设置可见性与隐藏/显示

setting visibility vs. hide/show

本文关键字：显示隐藏可见性设置更新时间：2023-09-26

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

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

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

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

Visibility仍将保留浏览器中的空间。

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

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

@更新：
一旦用.hide()（或.css('display', 'none')）隐藏了一个元素，则dom树下作为该元素子级的所有元素也将被隐藏。

@更新2:
如果使用.hide()和.show()，则为.is(':visible')如果您正在使用可见性css属性，则.css('visibility')

@更新3:
这正是.css('visibility', 'hidden')所做的，它隐藏元素而不进行页面重组。.hide()将完全"移除"元素。

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

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

从css的角度来看差异：

visbility : hidden

隐藏的值使生成的框不可见，而不会将其从布局中删除。可以使子框可见。查看此

display : none

如果值为none，则该元素根本不会生成长方体。子框也不能生成框，即使它们的显示属性设置为非零。查看此

隐藏时，仍会生成元素。

摘自w3schools.com：

可见性：隐藏会隐藏一个元素，但它仍然会占用与以前相同的空间。该元素将被隐藏，但仍会影响布局。
display：none隐藏元素，并且不会占用任何空间。元素将被隐藏，页面将显示为元素不在：

除了bardiir的解释之外，这里还有"display:none"answers"visibility:hidden"的良好演示http://www.w3schools.com/css/css_display_visibility.asp

"remove"按钮集"display:none"answers"hide"按钮组"visibility:hidden"。

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

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

关于您编辑的答案：

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