display和visibility的区别示例介绍

时间:2014-02-26    点击:137   
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>
jQuery 无限级菜单的简单实例
js控制table合并具体实现
js文件Cookie存取值示例代码
js获得参数的getParameter使用示例
简单选项卡 js和jquery制作方法分享
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved