zoukankan      html  css  js  c++  java
  • Display、Visibility 和 Opacity 的区别

      <style>
        .d1{
          display: none;
        }
        .d2{
          visibility: visible;
        }
        .d3{
          opacity: 0;
        }
      </style>
    
      <div class="d1" onclick="clickEvent('display: none;')"></div>
      <div class="d2" onclick="clickEvent('visibility: hidden;')"></div>
      <div class="d3" onclick="clickEvent('opacity: 0;')"></div>
      <script type="text/javascript">
        function clickEvent(type){
          alert(type)
        }
      </script>
    

    display: none;

    1. DOM结构:浏览器 不会渲染 display:none; 的元素,不占据空间
    2. 事件监听:无法进行DOM事件监听
    3. 性能:动态改变此属性时,会引起重排,性能较差
    4. 继承:不会被子元素继承,因为子元素也不会被渲染
    5. transition过渡:transition不支持display

    visibility: hidden;

    1. DOM结构:元素被隐藏,但是会被渲染不会消失,占据空间
    2. 事件监听:无法进行DOM事件监听
    3. 性能:动态改变此属性时,会引起重绘,性能较高
    4. 继承:会被子元素继承,但是子元素可以通过设置 visibility: visible; 来取消隐藏
    5. transition过渡:visible会立即显示,hidden时可以过渡

    opacity: 0;

    1. DOM结构:透明度为100%时,元素隐藏并占据空间
    2. 事件监听:可以监听DOM事件
    3. 性能:提升为合成层,不会触发重绘,性能较高
    4. 继承:会被子元素继承,并且子元素 不能通过 opacity: 1; 来取消隐藏
    5. transition过渡:隐藏和显示均支持过渡
  • 相关阅读:
    nohup
    wonder vscode plugins
    myhome vscode plugins
    virtural machine eth1
    单片机电子时钟的设计(期末课程设计)
    解决Eclipse中更改HTML页面后,浏览器查看页面无变化
    ASP.NET 中的 Session对象
    windows下mysql数据库导入导出
    TP5.1分表,partition分表实例,根据自增主键水平分表
    PHP操作mysql数据库分表的方法
  • 原文地址:https://www.cnblogs.com/echoyya/p/13645996.html
Copyright © 2011-2022 走看看