在CSS和JavaScript中使DIV不可见

Question

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

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

显示无将确保DIV框为空，隐藏可见性将确保它不可见。 这个方法的问题是当我有可滚动的DIV或带溢出内容的textareas时，当你设置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中进行了测试。 只是一个注释，DIV缠绕textarea似乎没有帮助FF，滚动条仍然重置。 但是可滚动的DIV现在很好。 谢谢你的帮助！

Answer 1

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

Answer 2

这可能会奏效：

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

编辑：我将看看HTML5 Boilerplate代码中的常见帮助器 ，以探索使事情消失的其他方法。

Answer 3

您可以使用JQuery hide（）方法。 $（ '＃DIVID'）隐藏（）。 或$（'。DivClass'）。hide（）;

Answer 4

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

Answer 5

布局方面，显示：none将它完全从渲染树中移出并进入这个地狱世界。 它没有明确定义的尺寸或位置。

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

Answer 6

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