Javascript 如何在不使用可见性功能的情况下隐藏图元

我正在尝试编写一个代码，每当单击按钮时，该代码都会为用户提供更多选项。 例如，假设我有一个带有两个按钮的页面，一个是“搜索书籍”，另一个是“搜索事件”。如果用户单击“搜索书籍”按钮，则在搜索按钮正下方的同一页面上，我希望显示不同的选项。我尝试使用css visibility:hidden函数，并使用javascript函数将其切换回visibility:visible。它确实起作用了，但是屏幕上留有一个巨大的空间来放置隐藏的元素。主窗口按钮彼此相距很远。一边是“搜索书籍”按钮，另一边是“搜索事件”按钮

这是代码的一部分

</head>
<div class ="buttons">
<div id="visible">
    <input type="button"  value="Click To Search Faculty Members" onclick="swapform()" class="button">
    </div>
    </div>
    <div class = "form" id="theform" style="visibility: hidden">
    <form name = "type"  value="fm" action="http://localhost:8080/278Project/search.php" method="post"  onsubmit="return goto();">
    <table>
    <span style="box-shadow: 0 0 0 1px white inset;">
    <select name="type" >
            <option value="fm"> Faculty Members Search </option>
            </select>
            <tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
            <div>                       
            <label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label> 
            <input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
            <div>
            <label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
            <input class="text" type="text" placeholder="Insert Name" name="list" >
            </div>
            <div>
            <label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
            <input class="text" type="text" placeholder="Insert Last Name" name="lname" >
            </div>
    </div>
    <!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
    <input type="submit" value="Get Info">
    </table>
    </div>
</span>
</form>


<!-- Book Search !-->
<div class="buttons">
<div  id="bvisible">
    <input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
    </div>
    </div>
    <div id="thebookform" style="visibility: hidden">
    <form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post"  onsubmit="return goto();">
    <table>
    <select name="type">
            <option value="ch"> Search for Books</option>
            </select>
            <tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
            <div>                       
            <label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label> 
            <input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
            <div>
            <label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
            <input class="text" type="text" placeholder="Insert Name" name="list" >
            </div>
            <div>
            <label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
            <input class="text" type="text" placeholder="Insert Last Name" name="lname" >
            </div>
    </div>
    <input type="submit" value="Get Info">
    </table>

教员搜索
列出所有教员名单
按Id列出
按名字列出
按姓氏列出
找书
列出所有可用的书籍
按Id列出
按出版商名称列出
按年度列出书籍

改用这个

display : none

除了元素占用的空白空间外，这也会执行相同的操作

---

---

看看标签，这里有jQuery。您可以使用

.hide（）

和

.show（）

来代替。

@DSG现在您有了！；）谢谢，我想这为我澄清了问题，我仍然有一个问题，我如何才能使元素再次显示这是我的功能。。我使用了内联函数，但它不起作用函数swapform（）{var visable var hidden visable=document.getElementById（“可见”）.innerHTML；hidden=document.getElementById（“theform”）.innerHTML；document.getElementById（“可见”）.innerHTML=inline；}@user3117253。。您需要为元素

document.getElementById（“可见”）.style.display='inline'设置
style.display
属性