使 DIV 在 CSS 和 JavaScript 中不可见答案

【问题标题】：Make DIV invisible in CSS and JavaScript使 DIV 在 CSS 和 JavaScript 中不可见
【发布时间】：2011-07-04 01:12:42
【问题描述】：

通过将显示设置为无并将可见性设置为隐藏，我设法使 DIV 标记在 JavaScript 中不可见。这个类也可以实现：

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

不显示将确保 DIV 框为空，隐藏可见性将确保它不可见。这种方法的问题是当我有内容溢出的可滚动 DIV 或文本区域时，当您设置 display: none 时，某些浏览器会忘记这些元素的滚动位置。有没有更好的方法在不使用 display 属性的情况下使 DIV 不可见？如果可能的话，我宁愿不使用 JavaScript 来记录滚动位置等。

编辑：

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

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

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

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

【问题讨论】：

只是一个猜测，但是将它放在容器 div 中并渲染 that div 不可见吗？由于这是一个猜测，我不提供它作为答案。
嗯，我以为我的解决方案成功了，但现在我发现 android 浏览器仍然向上滚动...：/
啊，我没有安卓……

标签： javascript css html invisible

【解决方案1】：

这可能会起作用：

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

编辑：我会看一下 HTML5 样板代码中的 common helpers，以探索其他使事物消失的方法。

【讨论】：

【解决方案2】：

您可以使用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

【讨论】：

【解决方案3】：

我宁愿使用固定的高度和宽度（高度：0；宽度：0；）。不要忘记消除边框、填充和边距。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

实际上我希望不使用 jquery，除非我必须这样做，但看看我写的所有代码，这将是一个更容易的选择:)

【解决方案6】：

如果您希望元素不可见但仍然呈现，您可以使用visibility:hidden。 display:none 将完全删除它并导致您提到的滚动行为。

【讨论】：

visibility:hidden 仍然会导致元素占用布局中的空间。我猜这不是 OP 想要的，因为他对display: none 感到满意，但没有滚动条问题。
是的，我知道可见性，但如果你的 DIV 是一个块，它仍然会占用那个空间。
+1 感谢您指出 visibility: hidden 与 display: none。这是一个有用的区别。
确实有效：