【前端】display:none和visibility:hidden两者的区别

程序员洲洲

于 2024-06-05 00:48:32 发布

阅读量7.3k

点赞数 14

文章标签：前端 displaynone visibility hidden

本文链接：https://blog.csdn.net/weixin_51484460/article/details/139457100

版权

在这里插入图片描述

😎 作者介绍：我是程序员洲洲，一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。公粽号：洲与AI。
🤓 欢迎大家关注我的专栏，我将分享Web前后端开发、人工智能、机器学习、深度学习从0到1系列文章。
🌼 同时洲洲已经建立了程序员技术交流群，如果您感兴趣，可以私信我加入我的社群~社群中将不定时分享各类福利
🖥 随时欢迎您跟我沟通，一起交流，一起成长、进步！点此即可获得联系方式~

前言

在CSS布局中，display和visibility属性是控制元素显示状态的两个重要工具。尽管它们在某些情况下可以互换使用，但它们之间存在一些关键的区别。本文将深入探讨这两个属性，并提供代码示例来帮助理解它们之间的差异。

一、display与元素的隐藏

display:none属性用于完全隐藏一个元素，并且不保留该元素在页面上所占的空间。当元素的display属性设置为none时，它不会在文档流中占据任何位置，就好像它从未存在过一样。

这里给出两个示例代码进行一个讲解

<div id="hiddenElement">这个元素将被隐藏</div>

#hiddenElement {
  display: none;
}

在上面的例子中，#hiddenElement将完全从页面上消失，并且不会留下任何空间。

我们也可以用图像来说明。

<body>
    <div>
        <strong>给元素设置display:none样式</strong>
        <p>A元素</p>
        <p style='display:none;'>B元素</p>
        <p>C元素</p>
    </div>
</body>

在这里插入图片描述

二、visibility与元素的隐藏

visibility:hidden属性将元素设置为不可见，但元素仍然保留其在页面上所占的空间。这意味着，即使元素不可见，它仍然会影响页面的布局。

<div id="invisibleElement">这个元素仍然占据空间，但不可见</div>

#invisibleElement {
  visibility: hidden;
}

在上述示例中，#invisibleElement将不可见，但它原本占据的空间仍然保留，这可能会影响其他元素的布局。

大家可以运行下面的代码简单实验一下。

<body>
    <div>
        <strong>给元素设置visibility:hidden样式</strong>
        <p>A元素</p>
        <p style='visibility:hidden;'>B元素</p>
        <p>C元素</p>
    </div>
</body>

在这里插入图片描述

三、两者区别

3.1 性能方面对比

display:none：由于元素完全从文档流中移除，可能对性能有积极影响，尤其是在处理大量隐藏元素时。

visibility:hidden：由于元素仍然占据空间，对性能的影响较小，但可能需要额外的布局计算。

另外，很多人认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

    <body>
        <div>
            <strong>给元素设置visibility:hidden样式</strong>
            <ol>
                <li>元素1</li>
                <li style="visibility:hidden;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
        <div>
            <strong>给元素设置display:none样式</strong>
            <ol>
                <li>元素1</li>
                <li style="display:none;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
    </body>

在这里插入图片描述

3.2 动画方面对比

display:none：不适用于动画或过渡效果，因为元素不存在于文档流中。

visibility:hidden：可以与opacity属性结合使用，创建平滑的显示和隐藏效果。

我们可以试下下面的代码示例，平滑隐藏元素。

<button id="toggleVisibility">Toggle Visibility</button>
<div id="smoothElement">平滑隐藏的元素</div>

#smoothElement {
  transition: visibility 0.5s, opacity 0.5s linear;
  opacity: 1;
}

#smoothElement.hidden {
  visibility: hidden;
  opacity: 0;
}

document.getElementById('toggleVisibility').addEventListener('click', function() {
  var element = document.getElementById('smoothElement');
  element.classList.toggle('hidden');
});

我们使用JavaScript来切换#smoothElement的hidden类，从而实现平滑的显示和隐藏效果。

四、总结

display:none和visibility:hidden各有其用途和特点。选择哪一个取决于你的具体需求：如果你需要完全隐藏元素并释放其空间，display:none是更好的选择；如果你只是想让元素不可见但保留其空间，visibility:hidden将是一个合适的选项。理解这些差异将帮助你更有效地使用CSS来控制元素的显示和隐藏。