display和visibility的区别

最新推荐文章于 2018-08-26 20:58:37 发布

小酷

最新推荐文章于 2018-08-26 20:58:37 发布

阅读量3.2k

点赞数

分类专栏： javascript 文章标签： visibility display

本文链接：https://blog.csdn.net/love_5209/article/details/19916557

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文详细解释了CSS中display和visibility属性的区别。display为none时元素不仅隐藏还会释放其所占空间，而visibility为hidden时元素虽然不可见但仍保留原有空间。通过实际案例演示了两种属性在网页布局中的具体应用。

摘要由CSDN通过智能技术生成

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" οnclick="isVisibility(document.getElementById('myDiv'))" value="是否可见visibility" />
<input type="button" οnclick="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>