使一个div可见，另一个不可见。

Question

我有两个div标签，一个是用于搜索，另一个用于结果。我需要的是当单击提交按钮时，将结果返回并放入结果div中（使用iframe），搜索div应变为隐藏状态，结果div应变为可见状态。

搜索div最初设置为可见状态（使用visibility: visible），结果div最初设置为隐藏状态（使用visibility: hidden）。

同时，初始情况下页面底部存在巨大的白色空白，如何确保底部没有多余的白色空间。

- mattgcon

Answer 1

您可以使用style的display属性。首先将结果部分的样式设置为

style = "display:none"

那么这个 div 将不可见，也不会有任何空白。

一旦搜索结果已经填充完毕，通过 JavaScript 更改显示属性，例如：

document.getElementById("someObj").style.display = "block"

使用 JavaScript 可以使 div 元素变为不可见。

document.getElementById("someObj").style.display = "none"

- Sujith

Answer 2

将元素的可见性设置为hidden仍会占用页面空间。建议将display属性设置为none来使元素不可见，然后将其设置为block以使其可见。

- My Other Me

---

请纠正我，但使用iFrame时，必须使其可见和显示，否则某些浏览器出于安全原因不会加载内容。但是，您可以将其设置为1x1像素和0.01％的不透明度。我曾经遇到过这个问题，当时是使用跨站点上传小部件。 - coolaj86

Answer 3

我认为你并不真正需要一个iframe，对吧？

除非你做了一些奇怪的事情，否则你应该会得到JSON或XML格式的结果，是吗？

针对你的白盒子/额外空间问题，尝试：

style="display: none;"

代替

style="visibility: hidden;"

- coolaj86

---

是的，实际上我需要，虽然我不想要，但客户要求。 - mattgcon

Answer 4

如果你想使用display=block，它会使内容跳动，所以你可以将左属性设置为负值，这个值在你的HTML页面中不存在，但实际上却可以显示出来，而不是使用display。

我希望你能理解我的意思，如果我没有让你明白，你可以给我发消息。

- Prateek