css 隐藏元素的4中方法

display:none

元素隐藏,元素所占的空间也消失了,会影响周围元素空间的变化所以会引起回流和重绘

visibility:hidden

元素隐藏,元素所占空间不会消失,不会影响周围元素空间的变化所以只会引起重绘

设置该样式的元素不会再触发事件了

 <style>
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        visibility: hidden;
        /* opacity: 0; */
    }
    .div2{
        width: 50px;
        height: 50px;
        background: blue;
        
    }
    </style>
</head>
<body>
    <div class="div1" onclick="click1()">
        fff
        <div class="div2">sss</div>
    </div>
    <script>
    //点击不会执行alert方法
     function click1(){
         alert(1)
     }
    </script>

 

opacity:0

元素隐藏,元素所占空间不会消失,不会影响周围元素空间的变化所以只会引起重绘

设置该样式的元素仍触发事件了

 <style>
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        opacity: 0; 
    }
    .div2{
        width: 50px;
        height: 50px;
        background: blue;
        
    }
    </style>
</head>
<body>
    <div class="div1" onclick="click1()">
        fff
        <div class="div2">sss</div>
    </div>
    <script>
    //点击会执行alert方法
     function click1(){
         alert(1)
     }
    </script>

 rgba()

最后一个元素为透明度,设置为0表示隐藏

posted @ 2019-08-28 20:50  大笛子  阅读(154)  评论(0)  编辑  收藏  举报