展会信息港展会大全

css属性display和visibility的区别
来源:互联网   发布日期:2016-01-27 15:56:48   浏览:1851次  

导读:这篇文章主要介绍了display和visibility的区别,需要的朋友可以参考下display通常可以设置为none、inline、blockvisibility通常可以设置为hidden、visible当display为none,visibility为hidden时,元素都会不见。 ...

这篇文章主要介绍了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>

赞助本站

人工智能实验室

相关热词: display visibility css

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港