29

通过将显示设置为无并将可见性设置为隐藏，我设法使 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;
}

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

4

6 回答 6

32

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

于 2011-02-25T03:24:46.643 回答
10

这可能会起作用：

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

编辑：我会看一下 HTML5 Boilerplate 代码中的常见帮助程序，以探索使事物消失的其他方法。

于 2011-02-25T03:25:59.667 回答
6

您可以使用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
于 2017-01-25T05:10:45.670 回答
5

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

于 2011-02-25T03:25:00.690 回答
3

布局方面， display:none 将其完全脱离渲染树并进入这个地狱边缘。它不再有明确定义的尺寸或位置。

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

于 2011-02-25T03:25:56.033 回答
2

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

于 2016-06-16T18:26:58.223 回答