在CSS和JavaScript中使DIV不可见

Question

我已经成功地通过将display设置为none和visibility设置为hidden使一个DIV标签在JavaScript中变得不可见。也可以使用以下类实现:

.invisible {
    display: none;
    visibility: hidden;
}

使用display: none会确保DIV元素为空，visibility: hidden会确保它不可见。这种方法的问题在于当我有可滚动的DIV或带有溢出内容的文本区域时，当您设置display: none时，一些浏览器会忘记这些元素的滚动位置。是否有更好的方法使一个DIV不可见而不使用display属性？如果可能的话，我宁愿不使用JavaScript记录滚动位置等。

编辑：

在你们的帮助下我设法解决了这个问题，我采用了以下方法：

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

我尝试使用left: -9999px，但这会在IE中扩展垂直滚动条...我还将文本区域包装在另一个DIV中，并对其应用可见/不可见样式，因为否则文本区域将失去滚动位置。 我在Chrome，Firefox，IE和Safari上的iPhone上进行了测试。请注意，在文本区域周围包裹的DIV似乎并没有帮助FF，滚动条仍然重置。但可滚动的DIV现在很好。感谢您的帮助！

- Aram Kocharyan

---

只是猜测，将其放入一个容器 div 并渲染该 div 不可见，这样做可以吗？由于这只是猜测，我不会将其作为答案提供。 - Dancrumb

哦，我以为你的解决方案成功了，但现在我发现安卓浏览器仍然向上滚动... :/ - Karussell

啊，我没有安卓手机... - Aram Kocharyan

Answer 1

如果你想让元素不可见但仍然渲染，则可以使用visibility:hidden。使用display:none会将其完全移除并导致你提到的滚动行为。

- Chris Van Opstal

---

visibility:hidden会导致元素在页面布局中依然占据空间。我猜这不是原帖作者所想要的，因为他试用了 display: none，除了滚动条问题以外，其他方面都符合他的要求。 - Bryan Downing

是的，我知道关于可见性的问题，但如果您的DIV是块级元素，它仍将占用该空间。 - Aram Kocharyan

+1 感谢指出 visibility: hidden 与 display: none 的区别。这是一个有用的区分。 - ashes999

真的有效： <div class="editor-field" style="display:none">

- user1575120

Answer 2

这可能会起作用：

.invisible {
    position: absolute;
    left: -9999px;
}

编辑:我会查看HTML5 Boilerplate代码中的常用工具，以探索其他使事物消失的方式。

- Bryan Downing

Answer 3

您可以使用jQuery来实现该解决方案。如果您想完全隐藏/显示div，则可以使用以下代码：

$('#my_element').show()
$('#my_element').hide()

如果您想让div变得不可见，但仍存在于页面中，则可以使用一种有效的技巧：

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum

- Arsman Ahmad

Answer 4

你可以使用 JQuery 的 hide() 方法。 $('#DivID').hide(); 或者 $('.DivClass').hide();

- Ali

---

其实我希望尽量不使用jQuery，除非必要，但考虑到我已经写了这么多代码，这可能是一个更简单的选择。 - Aram Kocharyan

Answer 5

在布局方面，display:none将其完全从渲染树中移除，并进入这个虚无的灵界。它不再具有明确定义的尺寸或位置。

如果您需要一些滚动位置的占位符，我建议使用一个占位符元素。一些零高度的DIV或甚至是<a name="something""></a>都可以起到作用。

- jpsimons

Answer 6

我更倾向于使用固定的高度和宽度（height:0; width:0;）。别忘了消除边框、填充和外边距。

- Macarrao