visibility:hidden 和 display:none的区别及元素可见性判定
by 毛三胖 on 2018年02月12日
阅:397赞:7

概要

display:none意味着相关元素不会出现在页面上(尽管仍可以通过dom与它进行交互)。所在页面上并没有给该元素分配空间。而visibility:hidden则与之不同,visibility:hidden只是意味着元素不可见,页面上不但给元素分配了空间,也对元素进行了渲染,只是元素不可见而已。

演示

说明

在CSS的规则中,visibility:hidden 和 display:none都能隐藏元素,但具体两者的区别是什么呢?

display:none意味着相关元素不会出现在页面上(尽管仍可以通过dom与它进行交互)。所在页面上并没有给该元素分配空间。而visibility:hidden则与之不同,visibility:hidden只是意味着元素不可见,页面上不但给元素分配了空间,也对元素进行了渲染,只是元素不可见而已。

具体差别,查看演示程序就很容易理解了。

CSS display 属性

display 属性设置元素如何显示。常用属性值如下:

属性
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
inherit 规定应该从父元素继承 display 属性的值。)

更多说明见 w3school HTML DOM display 属性

CSS visibility 属性

visibility 属性规定元素是否可见。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。具体属性值如下:

属性
visible 默认值。元素是可见的。
hidden 元素是不可见的。。
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。

可见性判定

在JQuery中的hide方法也是通过display:none来隐藏元素的,那么如何判定元素在页面中是否可见呢?

JQuery方法:

$(element).is(":visible");

JavaScript方法[JQuery中的写法]:

function isVisible( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}

上述可见性判定方法对visibility:hidden隐藏的元素无效,因为visibility:hidden元素在页面中拥有占位。

参考

What is the difference between visibility:hidden and display:none?

How do I check if an element is hidden in jQuery?

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。