display和visibility的区别

display和visibility的区别

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

visibility通常可以设置为hidden、visible

 

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

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

看例子即可明白：

 

[html]  view plain  copy

1. <div id="myDiv" style="width:100px;border:1px solid #aaa;">  
2.     <p>  
3.         ssssssssss  
4.     </p>  
5. </div>  
6. <input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可见visibility" />  
7. <input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可见display" />  
8. <script>  
9. function isVisibility(me){  
10.      if (me.style.visibility=="hidden"){  
11.          me.style.visibility="visible"; }  
12.      else{  
13.          me.style.visibility="hidden";   
14.      }  
15. }   
16.   
17. function isDisplay(me){  
18.      if (me.style.display=="none"){  
19.          me.style.display="block"; }  
20.      else{  
21.          me.style.display="none";   
22.      }  
23. }   
24. </script>