display和visibility的区别示例介绍

181 阅读 0 评论 120 点赞

我是靠谱客的博主妩媚帆布鞋，最近开发中收集的这篇文章主要介绍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> 