Javascript 设置可见性与隐藏/显示

setting visibility vs. hide/show

提问by BreakPhreak

What is the difference between element.css('visibility', 'visible')and element.show(). Also, what is the difference between element.css('visibility', 'hidden')and element.hide()?

是什么区别element.css('visibility', 'visible')和element.show()。此外，之间有什么区别element.css('visibility', 'hidden')和element.hide()？

Update: In addition, what is the most proper way to hide an element andall its elements' subtree?

更新：此外，隐藏元素及其所有元素的子树的最正确方法是什么？

Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible')or element.css('visibility')?

更新 N2：哪个是知道元素（及其子树）是否可见的正确方法：element.is(':visible')还是element.css('visibility')？

Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I've got it - the proper way would be to call hide()but it might lead to the page visual restructuring.

更新 N3：有没有办法隐藏一个元素（完全），但它仍然会保留浏览器页面上的空间/区域？（据我所知 - 正确的方法是调用，hide()但它可能会导致页面视觉重组。

采纳答案by bardiir

Visibility will still reserve the space in your Browser.

可见性仍会保留浏览器中的空间。

A hidden element is set to display: nonethus all space occupied by this element collapses. If you only set the element to visibility: hiddenthe element will just go transparent but the space is occupied as if the element is still there.

隐藏元素被设置为display: none因此该元素占用的所有空间都会折叠。如果您只将元素设置为元素，则visibility: hidden该元素将变为透明，但空间被占用，就好像元素仍在那里一样。

.hide()is equal to .css('display', 'none')
.show()is equalto .css('display', 'block')- I'm pretty sure jQuery does some magic here to decide if it's really blockthat should go in there but it's somewhat equal.

.hide()等于.css('display', 'none')
.show()就是等于到.css('display', 'block')-我敢肯定的jQuery做一些神奇在这里决定，如果它真的block应该去那里，但它有点相同。

@Update:
Once you hide an element with .hide()(or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.

@Update：
一旦你用.hide()（或.css('display', 'none')）隐藏了一个元素，dom-tree 中作为该元素的子元素的所有元素也将被隐藏。

@Update 2:
If you are using .hide()and .show()it's .is(':visible')If you are using the visibility css attribute then .css('visibility')

@Update 2：
如果您正在使用.hide()并且.show()它是.is(':visible')如果您正在使用可见性 css 属性那么.css('visibility')

@Update 3:
That's exactly what .css('visibility', 'hidden')does, it hides the element without the page restructuring. .hide()will completely "remove"the element.

@Update 3：
这正是.css('visibility', 'hidden')它的作用，它隐藏了没有页面重组的元素。.hide()将完全“删除”元素。

回答by gideon

jquery.hide()is equivalent to calling .css('display', 'none')and and jquery.showis equivalent to calling .css('display', 'block')

jquery.hide()相当于调用.css('display', 'none')and jquery.show相当于调用.css('display', 'block')

The .css()method is just setting the visibility property.

该.css()方法只是设置可见性属性。

From the css point of view difference :

从css的角度来看区别：

visbility : hidden

The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible. See this

hidden 值使生成的框不可见，而无需将它们从布局中删除。可以使后代框可见。看到这个

display : none

A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.See this

none 值使元素根本不生成框。后代框也不能生成框，即使它们的 display 属性设置为 none 以外的其他值。看到这个

With hiddenthe element is still generated.

随着藏仍会生成的元素。

回答by Orentet

Taken from w3schools.com:

摘自w3schools.com：

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

可见性：隐藏隐藏一个元素，但它仍然会占用与以前相同的空间。该元素将被隐藏，但仍会影响布局。

display:none 隐藏一个元素，它不会占用任何空间。该元素将被隐藏，页面将显示为该元素不存在：

回答by Mark Rhodes

They are setting 2 different css properties: hide/show sets the displayproperty to none, show removes this setting so that the default is used (e.g. 'block' for a div).

他们正在设置 2 个不同的 css 属性：hide/show 将display属性设置为none，show 删除此设置以便使用默认设置（例如，div 的“块”）。

The difference as the other answers point out is that calling hideon an element means that it (and all its ancestors) will not take up any space. Where as setting visibilityto hiddenwill effectively just make the elements completely transparent (but still take up space).

其他答案指出的不同之处在于，调用hide一个元素意味着它（及其所有祖先）不会占用任何空间。设置visibility为hidden将有效地使元素完全透明（但仍会占用空间）。

For answers to your edits:

对于您的编辑的答案：

1. Hide all ancestor (this is automatically done with both methods).
2. Use element.is(':visible')since this performs a check on both the visibilityand displayproperties and to see if the heightand widtharen't 0, it also performs it recursively on the ancestors, whereas element.css('visibility')just tells you the visibilityof the element.
3. Setting element.css('visibility', 'hidden')will do this - not calling element.hide().

1. 隐藏所有祖先（这两种方法都会自动完成）。
2. 使用，element.is(':visible')因为这对visibility和display属性执行检查并查看height和width是否不为 0，它还在祖先上递归执行它，而element.css('visibility')只是告诉您visibility元素的 。
3. 设置 element.css('visibility', 'hidden')将执行此操作 - 不调用element.hide().

回答by gumkins

In addition to bardiir's explanation here is good demo of "display:none" and "visibility:hidden" http://www.w3schools.com/css/css_display_visibility.asp

除了 bardiir 的解释，这里还有很好的“display:none”和“visibility:hidden”演示 http://www.w3schools.com/css/css_display_visibility.asp

"remove" button sets "display:none" and "hide" button sets "visibility:hidden".

“删除”按钮设置“显示：无”和“隐藏”按钮设置“可见性：隐藏”。