为啥 jQuery 显示/隐藏使用 display:none 而不是 visibility:hidden？

Posted 2023-02-21

【中文标题】为啥 jQuery 显示/隐藏使用 display:none 而不是 visibility:hidden？

【英文标题】：Why does jQuery show/hide use display:none instead of visibility:hidden?为什么 jQuery 显示/隐藏使用 display:none 而不是 visibility:hidden？

【发布时间】：2010-11-12 17:03:27

【问题描述】：

display:none 表示该元素不会作为 DOM 的一部分呈现，因此在显示属性更改为其他内容之前不会加载它。

visibility:hidden 加载元素，但不显示它。

为什么 jQuery 使用display:none 来显示/隐藏功能，而不是在visibility:hidden 和visibility:visible 之间切换？

【问题讨论】：

@RyanErb 您是否真的尝试阅读（并理解）这些问题，或者您只是匹配关键字？

【参考方案1】：

因为在display:none 中，无论出于何种目的，该元素都不复存在——它不占用任何空间。 但是，在visibility:hidden 中，就好像您刚刚将opacity:0 添加到元素中一样——它占用了相同数量的空间，但只是不可见。

jQuery 创建者可能认为前者更适合.hide()。

【讨论】：

所以应该有一种在技术之间切换的方法，因为有时需要让对象占据执行计算所需的空间！

【参考方案2】：

visibility: hidden 使元素不可见，但不会将其从页面布局中删除。它在元素所在的位置留下一个空框。 display: none 将其从布局中删除，因此它不会占用页面上的任何空间，这通常是人们在隐藏某些内容时想要的。

【讨论】：

但在某些情况下，可见性确实非常有用......就像你想保持布局一致......并且 UI 不会在隐藏/显示时缩小

【参考方案3】：

Visibility:hidden 使元素不可见，但仍占用页面空间。 Display:none 使元素没有空间并完全消失，而它仍然存在于 DOM 中。

【参考方案4】：

可见性只是使元素不可见，但仍会占用屏幕空间。

【参考方案5】：

Visibility:hidden 只是使元素不可见，但它是在 DOM 中加载的，因此会消耗加载时间。但是Display:none 不会加载该元素。