教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js display与visibility有哪些区别

js display与visibility有哪些区别

发布时间:2015-05-17   编辑:jiaochengji.com
本文介绍了js中display和visibility的区别,方便掌握二者的使用方法,有研究display、visibility的朋友参考下。

在javascript中,display通常可以设置为none、inline、block,visibility通常可以设置为hidden、visible。
当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。

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

例子:
 

复制代码 代码示例:

<div id="myDiv" style="width:100px;border:1px solid #aaa;">
<p>
js display功能visibility有哪些区别
</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>

您可能感兴趣的文章:
js display与visibility有哪些区别
js实现动态显示与隐藏层(visibility与display的差别)
js display属性与visibility属性的区别
css中display:none和visibility:hidden的区别
css中visibility与display属性区别比较
JS display属性实例解析
js控件隐藏与display属性学习
实例分析CSS属性Display与Visibility不同
css visibility和display区别
使用jquery修改display属性

关键词: display  visibility   
[关闭]
~ ~