display和visibility的区别

最新推荐文章于 2021-01-27 21:55:42 发布

寸寸时光

最新推荐文章于 2021-01-27 21:55:42 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/wang17866603359/article/details/78123112

本文介绍了在前端开发中display与visibility属性的区别及应用。通过实例演示了两种属性在控制元素显示与隐藏上的不同效果，帮助读者理解如何有效利用这些属性来优化网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible;
display的显示和隐藏在前端用的很多，这样他可以减少页面的空间的使用了，不占用原来的页面的空间，比如说弹框等。并且diplay inline可以改变标签的属性，行级标签改变成块级标签或者行块都可以。
visibility使用后隐藏后的元素还占用原来的页面的空间。在我们制作页面可以说基本不常用。
下面我们看下例子：

<div id="myDiv" style="width:100px;border:1px solid #aaa;">  
    <p>  
        ssssssssss  
    </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>