首页 > Web开发 > 详细

css 隐藏元素

时间:2020-05-28 18:07:34      阅读:40      评论:0      收藏:0      [点我收藏+]

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>

 

css 隐藏元素

原文:https://www.cnblogs.com/liuXiaoDi/p/12981867.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!