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

清疚 2023-06-05 12:50 21阅读 0赞

### 总结： ###

**1. display:none 让元素隐藏，不会显示在渲染树中，不会在dom文档占领位置，且子元素也不会展示，所以该元素的点击事件无用，使用display:none，会导致性能问题，因为会导致页面的重排  
2. opacity:0 只是让内容不可见，透明度为0，在渲染树中，在dom文档中仍旧占领位置，子元素也不会展示，而且子元素不能通过设置opacity：1来展示，元素的点击事件可用  
3. visibility:hidden 内容不可见，但是位置仍旧在渲染树中占领位置，但是点击事件无用，子元素设置 visibility: visible;可见，visibility 会导致页面重绘**

### 示例： ###

1.  display:none可发现点击事件无用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
2. opacity:0 点击事件可用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
3.visibility:hidden点击事件无用

.test {
        width: 100px;
        height: 100px;
        background: red;
      }
    
      .test:nth-of-type(1) {
        background: blue;
        visibility: hidden;
      }
      <div class="test">
        <div class="child">12</div>
      </div>
      <div class="test"></div>
      <script>
        document.getElementsByClassName('test')[0].onclick = function () {
          alert(1)
        }
      </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]  
但是子元素设置 visibility: visible; 可见

.child {
        visibility: visible;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230601/84551b483f4648baa8180d1ae1e99aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230601/47ca15aab4b4429bb1c2bc0125fcdd54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20230601/14f8a57f16ed4b59a6539db66073a65c.png