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

时间:2009-07-21 16:12:10

标签: javascript jquery visibility

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

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

为什么jQuery使用display:none来显示/隐藏功能,而不是在visibility:hiddenvisibility:visible之间切换?

5 个答案:

答案 0 :(得分:65)

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

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

答案 1 :(得分:18)

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

答案 2 :(得分:10)

可见性:隐藏使元素以一种仍然在页面上使用空间的方式不可见。显示:none使元素没有空格并完全消失,而它仍然存在于DOM中。

答案 3 :(得分:6)

可见性只会使元素不可见,但它仍会占用屏幕上的空间。

答案 4 :(得分:1)

Visibility:hidden只是让元素不可见但是它被加载到DOM中,因此它会消耗加载时间。但Display:none不加载该元素。