display:none
means that the element isn't rendered as part of the DOM, so it's not loaded until the display property changes to something else.
visibility:hidden
loads the element, but does not show it.
Why does jQuery use display:none
for its show/hide functions instead of switching between visibility:hidden
and visibility:visible
?
Because in display:none
, the element, for all purposes, ceases to exist -- it doesn't occupy any space. However, in visibility:hidden
, it's as if you had just added opacity:0
to the element -- it occupies the same amount of space but just acts invisible.
The jQuery creators probably thought the former would be a better fit for .hide()
.
visibility: hidden
makes an element invisible but does not remove it from the layout of the page. It leaves an empty box where the element was. display: none
removes it from the layout so it doesn't take up any space on the page, which is usually what people want when they hide something.
Visibility:hidden makes the element invisible in a way that it still uses space at the page. Display:none makes the element have no space and be completely gone, while it still exists in the DOM.
可见性仅使元素不可见,但仍会占用屏幕空间。
Visibility:hidden
just make the element invisible but it is loaded in DOM so it consumes load time. But Display:none
does not load the element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.