设置可见性与隐藏/显示

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

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

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

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

Answer 1

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

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

.hide()等于.css('display', 'none')
.show() 等于 .css('display', 'block') – 我很确定jQuery在这里做了一些魔术来决定它是否真的应该进入那里但是它有点相等。

@Update：
一旦使用.hide() （或.css('display', 'none')隐藏元素，dom-tree下面的所有元素也将隐藏在该元素的子元素之下。

@Update 2：
如果您正在使用.show() .hide()和.show()那么.show() .is(':visible')如果您使用的是visibility css属性，那么.css('visibility')

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

Answer 2

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

.css()方法只是设置visibility属性。

从css的角度来看差异：

 visbility : hidden 

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

 display : none 

值为none会使元素根本不生成任何框。 即使显示属性设置为非空，也不能生成方框。 看到这个

隐藏元素仍然生成。

Answer 3

取自w3c：

visibility：hidden隐藏了一个元素，但它仍然会占用与之前相同的空间。 该元素将被隐藏，但仍会影响布局。

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

Answer 4

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

“删除”按钮设置“display：none”和“hide”按钮设置“visibility：hidden”。

Answer 5

它们设置了2个不同的css属性：hide / show将display属性设置为none ，show删除此设置以便使用默认值（例如div的’block’）。

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

对于您的修改的答案：

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