javascript style.visibility 和 style.display 之间的差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7326925/
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
Difference betweet style.visibility and style.display
提问by Maria Velasco
Possible Duplicate:
What is the difference between visibility:hidden and display:none
I am looking at examples to hide/show divtags using JavaScript.
In some examples, they use visibilityand in some display.
我正在查看div使用 JavaScript隐藏/显示标签的示例。在某些示例中，他们使用visibility和 在某些display.
e.g.
例如
document.getElementById("divhotel").style.visibility = "hidden";
vs
对比
document.getElementById("divhotel").style.display = "none";
What is the difference between the two?
两者有什么区别？
回答by Richard Ev
When you set visibilityto hidden, the element is not shown but still takes up the same space on the page.
当您设置visibility为 时hidden，该元素不会显示，但仍会在页面上占据相同的空间。
When you get displayto none, the element is neither shown nor does it take up any space on the page.
当您到达display时none，该元素既不显示也不占用页面上的任何空间。
More often than not I find myself using display, but it depends on what your scenario demands.
我发现自己经常使用display，但这取决于您的场景要求。
回答by Travis
visibilityis how the element is rendered, the block where it exists is still laid out regardless of the value. Items might be pushed around because of that. displayis how it is rendered to the page: blockis divtype elements, with a full box models; noneelement isn't rendered to the page at all; inlineis an inline element such as a spanor anchor tag.
visibility是元素的渲染方式，无论值如何，它所在的块仍然布局。因此，项目可能会被推来推去。display它是如何呈现到页面的：block是div类型元素，具有完整的框模型；none元素根本没有渲染到页面；inline是一个内联元素，例如 aspan或 anchor 标签。
回答by ericb
Ah, beloved Google.
啊，亲爱的谷歌。
"style.visiblity makes the element visible or hidden, it is still rendered and takes up space on the page even if you can't see it. If you set style.display to "none" the markup is not processed and does not take up space on the page."
"style.visiblity 使元素可见或隐藏，即使您看不到它，它仍然会呈现并占用页面上的空间。如果将 style.display 设置为 "none"，则标记不会被处理并且不会占用在页面上腾出空间。”
