源代码
代码
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试visibility:hidden、display:none、opacity:0</title>
<style>
.vis{
visibility: hidden;
}
.dis{
display: none;
}
.opa{
opacity: 0;
}
</style>
</head>
<body>
<h2>我是visibility:hidden</h2>
<p class="vis">visiblity</p>
<hr>
<h2>我是display:none</h2>
<p class="dis">display</p>
<hr>
<h2>我是opacity:0</h2>
<p class="opa">opacity</p>
<hr>
</body>
代码运行结果展示
区别
页面展示
根据代码运行结果可以显而易见地看出来，visiblity和opacity仍旧在页面占着位置，display相反
元素获取
<script>
const vis = document.getElementsByClassName('vis')[0];
const dis = document.getElementsByClassName('dis')[0];
const opa = document.getElementsByClassName('opa')[0];
console.log(vis,"vis");
console.log(dis,"dis");
console.log(opa,"opa");
</script>
都能获取到元素节点
事件绑定
vis.onclick = function (){
console.log("vis");
}
dis.onclick = function (){
console.log("dis");
}
opa.onclick = function (){
console.log("opa");
}
只有opacity绑定的事件有效
<h2>我是visiblity:hidden</h2>
<p class="vis" onclick="console.log('v')">visiblity</p>
<hr>
<h2>我是display:none</h2>
<p class="dis" onclick="console.log('d')">display</p>
<hr>
<h2>我是opacity:0</h2>
<p class="opa" onclick="console.log('o')">opacity</p>
<hr>
也是只有opacity绑定的事件有效
