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

概要

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-visibility:hidden 和 display:none的差别是什么?</title>
</head>
<body>
<div>
    <p id="p1">1.种瓜得瓜,种豆得豆</p>
    <p id="p2">2.不要孤注一掷</p>
    <p id="p3">3.预防为主,治疗为辅</p>
    <button id="display">display</button>
    <button id="visibility">visibility</button>
</div>
<script type="text/javascript">
    var p2 = document.getElementById("p2");
    var display = document.getElementById("display");
    var visibility = document.getElementById("visibility");
    display.onclick = function () {
        var val = p2.style.display;
        if(val  && val == 'none') {
            p2.style.display = "block";
        } else {
            p2.style.display = "none";
        }

    };
    visibility.onclick = function () {
        var val = p2.style.visibility;
        if(val && val == 'hidden') {
            p2.style.visibility = "visible";
        } else {
            p2.style.visibility = "hidden";
        }
    };
</script>
</body>
</html>

说明

在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?

$ 热门标签
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。