元素hidden与opacity=0的区别

来源：互联网发布：打字淘宝兼职是真的吗编辑：程序博客网时间：2024/05/16 23:47

之前调试页面时偶然发现，hidden与opacity看似都不可见，但实有区别：

visibility：hidden则相当于完全从文档流中删除了该元素，但所占据的尺寸仍然保留。

opacity：0则仅仅不可见，但仍可被浏览器发现，也就能触发各种事件。通过浏览器调试工具即可得出此结论。

简单的验证：

<!DOCTYPE html><html><head><title>研究透明度与隐藏的区别</title><meta charset="utf-8"><style type="text/css">body{text-align: center;}.divHolder{display: inline-block;width: 200px;height: 300px;background-color: yellow;border:1px solid black;}.divHolder > div{display: block;width: 100%;height: 100px;}.hiddenDiv{visibility: hidden;}.invisibleDiv{opacity: 0.0;}.visibleDiv{background-color: gray;}</style><script type="text/javascript">function mouseevent() {alert("触发了事件！");}</script></head><body>左右两个大div中各有三个小div，小div尺寸相同。第一个hidden，第二个opacity=0，第三个正常显示。通过调试窗口可发现，浏览器能发现不透明度为0的div，但发现不了隐藏的div！<div class="divHolder"><div class="hiddenDiv" onclick="mouseevent()">点击触发事件</div><div class="invisibleDiv" onclick="mouseevent()">点击触发事件</div><div class="visibleDiv" onclick="mouseevent()">鼠标点击触发事件</div></div><div class="divHolder"><div class="hiddenDiv" onmouseover="mouseevent()">覆盖触发</div><div class="invisibleDiv" onmouseover="mouseevent()">覆盖触发</div><div class="visibleDiv" onmouseover="mouseevent()">鼠标覆盖时触发事件</div></div></body></html>

0 0