最近项目中涉及到节点隐藏的问题，发现自己不太了解，趁热打铁，我们一起来学习一下吧！
着重讲一下 display和visibility在隐藏元素时候的区别:
属性说明
-
display:none
隐藏元素时：渲染树不构建元素，通俗说，页面没有这个节点，所以其不占位置空间 -
visibility:hidden
隐藏元素时：渲染树构建元素（页面有这个节点）但是不渲染出来，页面上不可见这个元素，但是会占空间
例如
image.png
点击display:none,红色方块不见了
image.png
点击 visibility
image.png
总结
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none,这样，下边的内容就自动填补这个空隙。但是在一些特殊的情况下，我们只需要隐藏这个元素，但它的位置不能被占用了，那么，visibility:hidden就可以实现这个要求。
源码
<!DOCTYPE html>
<html>
<head>
<title>Hello, World</title>
<link rel="stylesheet" href="/style.css">
<style type="text/css">
#one{
background-color: pink;
}
#two{
background-color: red;
}
#three{
background-color: blue;
}
#four{
background-color: green;
}
#five{
background-color: orange;
}
.wh{
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div id = "one" class="wh">这是第一个</div>
<div id = "two" class="wh">被隐藏方式为：display = "none"</div>
<div id = "three" class="wh">第三个</div>
<div id = "four" class="wh">被隐藏2方式为：visibility = "hidden"</div>
<div id = "five" class="wh">第三个</div>
<button id = "btn1">display:none</button>
<button id = "btn2">visibility:hidden</button>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var two = document.getElementById("two");
var four = document.getElementById("four");
btn1.onclick = function(){
if(two.style.display === "none"){
two.style.display = "block";
}else{
two.style.display = "none";
}
}
btn2.onclick = function(){
if(four.style.visibility === "visible"){
four.style.visibility = "hidden";
}else{
four.style.visibility = "visible";
}
}
</script>
</html>
网友评论