display和visibility的区别

来源：互联网发布：c罗欧洲杯夺冠知乎编辑：程序博客网时间：2024/05/16 08:58

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。

display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

看例子即可明白：

<div id="myDiv" style="width:100px;border:1px solid #aaa;"><p>ssssssssss</p></div><input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可见visibility" /><input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可见display" /><script>function isVisibility(me){ if (me.style.visibility=="hidden"){ me.style.visibility="visible"; } else{ me.style.visibility="hidden";  }} function isDisplay(me){ if (me.style.display=="none"){ me.style.display="block"; } else{ me.style.display="none";  }} </script>

0 0