display和visibility的区别示例介绍
时间：2021-03-21 10:29:46|栏目：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>
</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>
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>
上一篇：js实现仿qq消息的弹出窗效果
栏 目：JavaScript代码
下一篇：JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
本文标题：display和visibility的区别示例介绍
本文地址：http://www.codeinn.net/misctech/85074.html
