使 DIV 在 CSS 和 JavaScript 中不可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5113246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make DIV invisible in CSS and JavaScript
提问by Aram Kocharyan
I have managed to make a DIV tag invisible in JavaScript by setting the display to none and the visibility to hidden. It can be achieved with this class also:
通过将显示设置为无并将可见性设置为隐藏，我设法使 DIV 标签在 JavaScript 中不可见。它也可以通过这个类来实现：
.invisible {
display: none;
visibility: hidden;
}
Display none will ensure the DIV box is empty, and visibility hidden will ensure it isn't visible. The problem with this method is when I have scrollable DIVs or textareas with overflowing content, when you set display: none, some browsers will forget the scroll position for these elements. Is there a better way to make a DIV invisible without using the display property? I would rather not resort to using JavaScript to record the scroll position and such if possible.
Display none 将确保 DIV 框为空，而visibility hidden 将确保它不可见。这种方法的问题是当我有内容溢出的可滚动 DIV 或文本区域时，当您设置 display: none 时，某些浏览器会忘记这些元素的滚动位置。有没有更好的方法可以在不使用 display 属性的情况下使 DIV 不可见？如果可能的话，我宁愿不使用 JavaScript 来记录滚动位置等。
EDIT:
编辑：
I managed to solve it with your help, I applied the following:
我设法在您的帮助下解决了它，我应用了以下内容：
.invisible {
visibility: hidden;
position: absolute;
top: -9999px;
}
.visible {
visibility: visible;
position: static;
}
I tried left: -9999px, but this expands the vertical scrollbar in IE... I also wrapped my textarea in another DIV and applied the visible/invisible styles to that, because the textarea would lose its scroll position otherwise. I tested this in Chrome, Firefox, IE and Safari on my iPhone. Just a note, the DIV wrapped around the textarea didn't seem to help in FF, and the scrollbar still reset. But the scrollable DIVs are fine now. Thanks for your help!
我尝试向左：-9999px，但这会扩展 IE 中的垂直滚动条...我还将我的 textarea 包裹在另一个 DIV 中并对其应用了可见/不可见样式，因为否则 textarea 将失去其滚动位置。我在 iPhone 上的 Chrome、Firefox、IE 和 Safari 中对此进行了测试。请注意，环绕 textarea 的 DIV 似乎对 FF 没有帮助，并且滚动条仍然重置。但是可滚动的 DIV 现在很好。谢谢你的帮助！
采纳答案by Bryan Downing
This would probably work:
这可能会起作用：
.invisible {
position: absolute;
left: -9999px;
}
EDIT:I would take a look at the common helpersin the HTML5 Boilerplate code to explore other ways of making things disappear.
编辑：我会看看HTML5 Boilerplate 代码中的常用助手，以探索使事情消失的其他方法。
回答by Chris Van Opstal
You can just use visibility:hiddenif you want the element to be invisible but still rendered. display:nonewill remove it entirely and cause the scroll behavior you mentioned.
visibility:hidden如果您希望元素不可见但仍然呈现，您可以使用。display:none将完全删除它并导致您提到的滚动行为。
回答by Ali
You can use a JQuery hide() method. $('#DivID').hide(); or $('.DivClass').hide();
您可以使用 JQuery hide() 方法。$('#DivID').hide(); 或 $('.DivClass').hide();
回答by Arsman Ahmad
You can use jQueryto acheive the solution.
If you want to totally hide/show the div, then u can use:
您可以使用jQuery来实现解决方案。如果你想完全隐藏/显示div，那么你可以使用：
$('#my_element').show()
$('#my_element').hide()
And if you want that your div become invisible and its still existing in the page, then you can use efficient trick:
如果你想让你的 div 变得不可见并且它仍然存在于页面中，那么你可以使用有效的技巧：
$('#my_element').css('opacity', '0.0'); // invisible Maximum
$('#my_element').css('opacity', '1.0'); // visible maximum
回答by jpsimons
Layout-wise, display:none takes it completely out of the rendering tree and into this netherworld limbo. It has no well-defined dimensions or position anymore.
在布局方面， display:none 将它完全从渲染树中取出并进入这个阴间世界。它不再有明确定义的尺寸或位置。
If you need some placeholder for scroll position, I'd suggest using a placeholder element. Some zero-height DIV or maybe even an <a name="something""></a>would work.
如果您需要一些占位符来显示滚动位置，我建议您使用占位符元素。一些零高度 DIV 或什至可能<a name="something""></a>会起作用。
回答by Macarrao
I rather use a fixed height and width (height:0; width:0;). Don't forget to eliminate borders, paddings and margins.
我宁愿使用固定的高度和宽度（高度：0；宽度：0；）。不要忘记消除边框、填充和边距。
