js显示隐藏 display visibility以及jquery里的show hide的区别开启掘金成长之旅！这是我参

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第35天，点击查看活动详情

js显示隐藏 display visibility以及jquery里的show hide的区别

文章包含个人理解，错误请您指出。

display和visibility都是css样式，而show hide则是jquery的方法

display

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。

    <style>
        body{
            border: 1px solid black;
        }
        #a1{
            display: none;
        }
    </style>
</head>
<body>
    <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
    <div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
    </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>

编辑

给a1设置display隐藏之后，剩下了黄色和蓝色，并且黄色变成了第一个

visibility


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

<style>
        body{
            border: 1px solid black;
        }
        #a1{
            /* display: none; */
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
    <div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
    </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>

编辑

同样只是生下了黄色和蓝色，但是保留了红色位置。

这是为什么呢？

display属性应用之后会引起页面的重塑和回流，而visibility只会引起重塑不会回流，

通俗讲就是 display隐藏之后自己的位置没有了，visibility隐藏之后虽然东西没了，但还站着原来的位置。

hide show

 <style>
        body{
            border: 1px solid black;
        }
        #a1{
            /* display: none; */
            /* visibility: hidden; */
        }
    </style>
    <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
    <script>
        $(function(){
            $('#a1').hide();
        })
    </script>
</head>
<body>
    <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
    <div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
    </div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>

编辑

这次我们使用了hide方法，跟display一样剩下了黄色和蓝色的div并且黄色跑到了顶部，

其实hide方法就相当于display none隐藏，不会保留原位置。

那么如果都设置了谁的级别更高呢？

<style>
        body{
            border: 1px solid black;
        }
        #a1{
            visibility: visible;
            display: none;
            
        }
    </style>
    <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
    <script>
        // $(function(){
        //     $('#a1').hide();
        // })
    </script>
</head>
<body>
    <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
    <div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
        <div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>

    </div>

编辑

红色隐藏了，是不是说display的级别更大呢？

我们试试visibility的隐藏

  <style>
        body{
            border: 1px solid black;
        }
        #a1{
            visibility: hidden;
            display: block;
            
        }
    </style>
    <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
    <script>
        // $(function(){
        //     $('#a1').hide();
        // })
    </script>
</head>
<body>
    <div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
    <div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
       
    </div>
    <div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>

</body>

编辑

这下是visibility的隐藏起作用了那究竟是谁的级别更高呢

个人认为：谁隐藏谁级别就高，会优先执行隐藏属性，display隐藏就使用display回流，visibility隐藏就使用visibility不回流。