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

坚毅的小解同志

已于 2023-03-28 19:11:40 修改

阅读量1.3k

点赞数 16

分类专栏： css3 jquery 文章标签： jquery javascript 前端 css html

于 2022-05-31 09:24:08 首次发布

本文链接：https://blog.csdn.net/m0_62360527/article/details/125058028

版权

css3 同时被 2 个专栏收录

18 篇文章 12 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

本文探讨了CSS的display和visibility属性以及jQuery的show/hide方法在隐藏元素时的差异。display:none会移除元素并影响布局，而visibility:hidden则保留元素位置但不可见。jQuery的hide()相当于display:none。当同时设置display和visibility时，display的优先级更高。文章通过实例代码展示了这些概念。

摘要由CSDN通过智能技术生成

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>