隐藏元素的几种方法
一、display:none
隐藏元素,并影响布局,相当是将这个元素删除了
二、visibility:hidden
隐藏元素,但不影响布局,也不会触发该元素已 经绑定的事件
三、opacity:0
隐藏元素,不影响布局,但已绑定的事件仍然可以触发,如click事件
<style>
.display {
display: none;
}
.visibility {
visibility: hidden;
}
.opacity {
opacity: 0;
}
</style>
<body>
<div class="display">我是一只小毛驴</div>
<div>我是一只小毛驴2号</div>
<div class="visibility" onclick="but3()">我是一只小毛驴3号</div>
<div>我是一只小毛驴4号</div>
<div class="opacity" onclick="but5()">我是一只小毛驴5号</div>
<div>我是一只小毛驴6号</div>
<script>
function but3() {
alert('我是小毛驴3号')
}
function but5() {
alert('我是小毛驴5号')
}
</script>
</body>