display和visibility的区别示例介绍

前端技术 2023/09/05 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>

本文地址：https://www.stayed.cn/item/13700

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案