为什么jQuery使用display:none而不是visibility:hidden来实现显示/隐藏?

阅读时长 3 分钟读完

在前端开发中,经常需要控制元素的显示和隐藏。我们可以使用 CSS 属性 visibilitydisplay 来实现这一目的。但是,当我们使用 jQuery 等 JavaScript 库时,通常会发现它们使用 display: none 而不是 visibility: hidden 来隐藏元素。那么,为什么要这样做呢?

区别

首先,让我们了解一下 visibilitydisplay 的区别。

visibility

visibility 控制元素是否可见,但仍保留元素在文档流中所占用的空间。当我们将一个元素的 visibility 设置为 hidden 时,该元素的内容将不再显示,但它在文档流中仍然存在,并占据着相应的空间。

上面的代码会将 <div> 元素隐藏起来,但是它仍然占用着相应的空间。如果我们使用开发者工具查看页面的 DOM 结构,可以看到该元素在 DOM 树中仍然存在。

display

display 控制元素是否显示,并决定了元素在文档流中所占用的空间。当我们将一个元素的 display 设置为 none 时,该元素会从文档流中移除,并且不再占用相应的空间。

上面的代码会将 <div> 元素隐藏起来,并且它不再占用相应的空间。如果我们使用开发者工具查看页面的 DOM 结构,可以看到该元素已经不存在于 DOM 树中。

为什么要使用 display: none

现在,我们回到最初的问题:为什么 jQuery 等 JavaScript 库使用 display: none 而不是 visibility: hidden 来实现显示/隐藏呢?

1. 兼容性

首先,display: none 在各种浏览器和设备上的兼容性更好。虽然 visibility: hidden 在大多数情况下也能正常工作,但在某些旧的浏览器和设备上可能会出现问题。

2. 布局

第二个原因是 display: none 不仅仅是隐藏元素,而是完全从文档流中移除元素。这意味着,当一个元素被隐藏时,它将不再占用任何空间,从而不会影响其他元素的布局。

例如,如果我们有一个页面的 header 和 footer,当我们隐藏中间的内容时,我们希望 header 和 footer 自动适应页面的高度,而不会空出中间内容原来所占用的空间。使用 display: none 可以轻松地实现这一点。

-- -------------------- ---- -------
--------
  -----
---------

----- -------------
  -------
-------

--------
  -----
---------

3. 性能

第三个原因是,使用 display: none 可以提高性能。当一个元素被隐藏时,浏览器不需要对其进行布局和绘制,从而可以节省计算资源和时间。

示例代码

下面是一个简单的例子,展示了如何使用 jQuery 将元素隐藏起来。

纠错
反馈