显示与可见性区别

姐一如既往的优雅
44 阅读3分钟

区别

display: nonevisibility: hiddenopacity: 0
是否占据页面空间不占据占据占据
子元素设置该属性，其他值是否可以继续显示不可以可以不可以
自身绑定的事件是否能继续触发不能触发不能触发能触发
是否影响遮挡住的元素触发事件不影响不影响影响
属性值改变是否产生回流产生不产生不产生
属性值改变是否产生重绘产生产生不一定产生
该属性是否支持transition不支持支持支持

一. 共同点

 -   都可以隐藏元素，让元素不可见

二. 不同点

  1. 空间占据

    • display: none会使元素脱离文档流,不占据原来的空间，页面重新渲染。
    • visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置。

  2. 回流与渲染

    • dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流
    • dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。

使用visibility:hidden比display:none性能上要好。

回流必将引起重绘，而重绘不一定会引起回流。

  1. 子元素继承

    • display: none,不会被子元素继承，会一起隐藏，并且当子元素设置display:block属性时并无效果。
    • opacity:0也是一样的。当父级已经设置opacity:0后，子元素是基于父元素的opacity:0基础上的opacity值。无论子元素设置opacity为多大时均无效果。
    • visibility:hidden 会被子元素继承,可以通过设置子元素visibility:visibile时会让子元素显示出来。

  2. 事件绑定

    • display:none属性使该元素无法再触发事件。
    • visibility:hidden也无法触发事件。
    • opacity: 0仍然可以触发事件

  3. 动画效果

    • display: none无法使用transition动画的,不会呈现过渡的效果
    • transition是支持visibility的,visibility过渡过程的值范围是0-1,但是当visibility的值大于0就显示，所以不支持淡入淡出。transform：visibility会立即显示，隐藏时会延时
    • transition是支持opacity的,可以用来做动画效果，支持淡入淡出
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <div class="container">
      <div class="target">
        <p>I am target, and you ?</p>
      </div>
    </div>

    <style>
      .container {
        margin: 0 auto;
        width: 500px;
        min-height: 30px;
        background-color: skyblue;
      }

      .target {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0 auto;
        background-color: plum;
        color: #fff;
        transition: all linear 1s;
        cursor: pointer;
      }

      .clickBlock {
        display: none;
      }

      .clickVisibility {
        visibility: hidden;
      }

      .clickOpacity {
        opacity: 0;
      }

      .clickRgba {
        background-color: rgba(221, 160, 221, 0);
      }

      .clickZindex {
        z-index: -1;
        position: absolute;
      }
    </style>

    <script>
      const _target = document.getElementsByClassName("target")[0];
      _target.onclick = (() => {
        let i = 1; // click 次数
        return () => {
          // _target.attributes.class.value += " clickBlock";
          // _target.attributes.class.value += " clickVisibility";
          // _target.attributes.class.value += " clickOpacity";
          // _target.attributes.class.value += " clickRgba";
          _target.attributes.class.value += " clickZindex";
          console.log(`第${i}次点击`);
          i++;
        }
      })();
    </script>
  </body>
</html>
rgba
  1. background：rgba(R, G, B, 0)，只是背景颜色透明，元素透明，依然占据空间。
  2. background：rgba(R, G, B, 0)不会被子元素继承
  3. 依然能触发已经绑定的事件。
  4. transition有效。
z-index: -1
  1. 在元素当前dom脱离文档流(position:absolute)的前提下，设置z-index才起作用。
  2. 设置z-index：-1本质是改变当前dom的层叠上下文，使器置于其他元素之下，达到被隐藏的目的。
  3. 部分重排，不影响其他图层布局
  4. 被其他元素遮挡部分，无法响应事件，即使上层元素设置了pointer-events:none;也无法点击到(注：这个属性会被继承的)
avatar
文章
阅读
粉丝