display和visibility的区别示例介绍

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

  visibility通常可以设置为hidden、visible

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

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

  看例子即可明白:

  

复制代码 代码如下:

  <div id="myDiv" style="width:100px;border:1px solid #aaa;">

  <p>

  </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>