关于display和visibility的区别
不说废话,直接上代码:
<body>
Hello
<button onclick="hide(this,true)">Hide1</button>
<button onclick="hide(this)">Hide2</button>
World
<script>
function hide(e,reflow){
console.log(reflow);
if(reflow){
e.style.display = "none";
}else{
e.style.visibility = "hidden";
}
}
</script>
</body>
最后效果图:
结果解释:
display:这个属性设置为none后,元素会被隐藏,并且元素所占用的位置也会释放出来,其他的元素则会占用该释放的空间。
visibility:这个属性设置为hidden后,元素会被隐藏,但是元素占用的空间并不会释放。