胡熙国

CSS 隐藏元素的方法

使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);、height: 0; overflow: hidden;。

diaplay

display: none;属性依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。

<style type="text/css">
  .display-hide {
    display: none;
  }
</style>

<section>
  <div id="t1"></div>
</section>

<script type="text/javascript">
  document.getElementById("t1").addEventListener("click", (e) => {
    alert("第一次点击会隐藏，此后再也无法点击");
    e.srcElement.classList.add("display-hide");
  });
</script>

opacity

opacity是用以设置透明度的属性，将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果。对于opacity属性，可以利用其透明的视觉效果制作点击劫持攻击。

<style type="text/css">
  .opacity-hide {
    opacity: 0;
  }
</style>

<section>
  <div id="t2">opacity</div>
</section>

<script type="text/javascript">
  document.getElementById("t2").addEventListener("click", (e) => {
    alert(
      "第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效"
    );
    e.srcElement.classList.add("opacity-hide");
  });
</script>

visibility

当visibility属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与opacity不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的visibility被设置为visible而父元素的visibility设置为hidden，子元素依旧可以显示而父元素会被隐藏。

<style type="text/css">
  .visibility-hide {
    visibility: hidden;
  }
</style>

<section>
  <div id="t3">
    <div>visibility</div>
    <div style="visibility: visible; color: #000;">still show</div>
  </div>
</section>

<script type="text/javascript">
  document.getElementById("t3").addEventListener("click", (e) => {
    alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
    e.srcElement.classList.add("visibility-hide");
  });
</script>

position

使用position与overflow属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向top、left、right、bottom达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加class时即可实现过渡动画。

<style type="text/css">
  body {
    overflow: hidden;
  }

  .posistion-origin {
    position: absolute;
    left: 5px;
    top: 5px;
  }

  .position-hide {
    left: -150px;
  }
</style>

<section style="position: relative;height: 115px;">
  <div id="t4" class="posistion-origin">position</div>
</section>

<script type="text/javascript">
  document.getElementById("t4").addEventListener("click", (e) => {
    alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
    e.srcElement.classList.add("position-hide");
  });
</script>

clip-path

clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅https://caniuse.com/#search=clip-path。

<style type="text/css">
  .clip-path-hide {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
</style>

<section>
  <div id="t5">clip-path</div>
</section>

<script type="text/javascript">
  document.getElementById("t5").addEventListener("click", (e) => {
    alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
    e.srcElement.classList.add("clip-path-hide");
  });
</script>

height

类似于position与overflow的组合，使用height: 0;将元素高度设置为0，使用overflow: hidden将超出部分裁剪隐藏，即可实现隐藏效果，如果需要使用这两个属性制呈现过渡动画的话，需要将height给予一个确定的值，不能是auto。

<style type="text/css">
  .height-hide {
    height: 0 !important;
    overflow: hidden;
  }
</style>

<section>
  <div id="t6">height</div>
</section>

<script type="text/javascript">
  document.getElementById("t6").addEventListener("click", (e) => {
    alert(
      "第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效"
    );
    e.srcElement.classList.add("height-hide");
  });
</script>

代码示例

<!DOCTYPE html>
<html>
  <head>
    <title>隐藏元素</title>
    <style type="text/css">
      body {
        overflow: hidden;
      }

      section > div:first-child {
        width: 100px;
        height: 100px;
        background-color: blue;
      }

      section {
        border-bottom: 1px solid #eee;
        padding: 5px;
        box-sizing: border-box;
      }

      div {
        color: #fff;
        transition: all 0.3s;
      }

      .display-hide {
        display: none;
      }

      .opacity-hide {
        opacity: 0;
      }

      .visibility-hide {
        visibility: hidden;
      }

      .posistion-origin {
        position: absolute;
        left: 5px;
        top: 5px;
      }

      .position-hide {
        left: -150px;
      }

      .clip-path-hide {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      }

      .height-hide {
        height: 0 !important;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <section>
      <div id="t1">display</div>
    </section>

    <section>
      <div id="t2">opacity</div>
    </section>

    <section>
      <div id="t3">
        <div>visibility</div>
        <div style="visibility: visible; color: #000;">still show</div>
      </div>
    </section>

    <section style="position: relative;height: 115px;">
      <div id="t4" class="posistion-origin">position</div>
    </section>

    <section>
      <div id="t5">clip-path</div>
    </section>

    <section>
      <div id="t6">height</div>
    </section>
  </body>
  <script type="text/javascript">
    document.getElementById("t1").addEventListener("click", (e) => {
      alert("第一次点击会隐藏，此后再也无法点击");
      e.srcElement.classList.add("display-hide");
    });

    document.getElementById("t2").addEventListener("click", (e) => {
      alert(
        "第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效"
      );
      e.srcElement.classList.add("opacity-hide");
    });

    document.getElementById("t3").addEventListener("click", (e) => {
      alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
      e.srcElement.classList.add("visibility-hide");
    });

    document.getElementById("t4").addEventListener("click", (e) => {
      alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
      e.srcElement.classList.add("position-hide");
    });

    document.getElementById("t5").addEventListener("click", (e) => {
      alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
      e.srcElement.classList.add("clip-path-hide");
    });

    document.getElementById("t6").addEventListener("click", (e) => {
      alert(
        "第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效"
      );
      e.srcElement.classList.add("height-hide");
    });
  </script>
</html>
贡献者: huxiguo