display: none和visibility: hidden的区别

最新推荐文章于 2022-03-16 18:43:00 发布

ikun不解释

最新推荐文章于 2022-03-16 18:43:00 发布

阅读量140

点赞数

分类专栏： css javascript 文章标签： display: none visibility: hidden

本文链接：https://blog.csdn.net/qq_42309685/article/details/96693147

版权

javascript 同时被 2 个专栏收录

134 篇文章 2 订阅

订阅专栏

css

55 篇文章 0 订阅

订阅专栏

display: none 和 visibility: hidden的区别

先看一下最初的效果

display: none（按钮设置div1）

<div>div1</div>
<div>div2</div>
<button>隐藏div1</button>
<script>
var div1 = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
	div1.style.display = "none";
}
</script>

display: none
2. visibility: hidden（同上）

<div>div1</div>
<div>div2</div>
<button>隐藏div1</button>
<script>
var div1 = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
	div1.style.visibility = "hidden";
}
</script>

总结：二者都有隐藏元素的效果。不同点是display: none不会占用原来的位置，而visibility: hidden 会占用原来的位置