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>