display: none、visibility: hidden和opacity: 0的区别

lonelydawn

发布于 2022-09-27 19:10:04

7950

发布于 2022-09-27 19:10:04

文章被收录于专栏：lonelydawn的前端猿区lonelydawn的前端猿区

是否脱离文档流

display: none：元素将脱离文档流，不占据原来的空间，会引起页面的重排
visibility: hidden：不会脱离文档流，元素不可见仍然占据原来的位置
opacity: 0：不会脱离文档流，元素不可见仍然占据原来的位置

是否继承可见性

display: none 和 opacity: 0，子元素会和父元素一样保持不可见。

visibility: hidden 的父元素下，若子元素设为 visibility: visible，则父元素不可见，子元素可见。示例如下：

<style type="text/css">
    .parent {
        visibility: hidden;
        width: 300px;
        height:  300px;
        background-color: #2468F2;
    }

    .child {
        visibility: visible;
        width: 200px;
        height:  100px;
        background-color: #CCC;
    }
</style>
<div class="parent">
    <div class="child">child</div>
<div>

结果如下：

是否响应事件

display: none元素都不在文档流中了，不会响应事件
visibility: hidden 的元素也不会响应事件
opacity: 0 的元素可以响应事件

示例如下:

<style type="text/css">
    .box {
        display: inline-block;
        font-size: 48px;
        width: 300px;
        height: 300px;
    }
    .box:active {
        cursor: wait;
    }

    #opacity {
        background-color: #F00;
    }
    #visibility {
        background-color: #00F;
    }
</style>
<div id="opacity" class="box">opacity</div>
<div id="visibility" class="box">visibility</div>

<button onclick="setHidden()">设置不可见</button>

<script type="text/javascript">
    const opacityEl = document.getElementById('opacity');
    const visibilityEl = document.getElementById('visibility');

    function setHidden() {
        opacityEl.style.opacity = 0;
        visibilityEl.style.visibility = 'hidden';
    }

    opacityEl.onclick = function () {
        alert('click');
    }
    visibilityEl.onclick = function () {
        alert('click');
    }
</script>

结果如下：