js显示隐藏 display visibility以及jquery里的show hide的区别
js显示隐藏 display visibility以及jquery里的show hide的区别
js显示隐藏 display visibility以及jquery里的show hide的区别
文章包含个人理解，错误请您指出。
display和visibility都是css样式，而show hide则是jquery的方法
display
值 | 描述 |
|---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
<style>
body{
border: 1px solid black;
}
#a1{
display: none;
}
</style>
</head>
<body>
<div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
<div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
</div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>
给a1设置display隐藏之后，剩下了黄色和蓝色，并且黄色变成了第一个
visibility
visible | 默认值。元素是可见的。 |
|---|---|
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |
<style>
body{
border: 1px solid black;
}
#a1{
/* display: none; */
visibility: hidden;
}
</style>
</head>
<body>
<div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
<div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
</div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>
同样只是生下了黄色和蓝色，但是保留了红色位置。
这是为什么呢？
display属性应用之后会引起页面的重塑和回流，而visibility只会引起重塑不会回流，
通俗讲就是 display隐藏之后自己的位置没有了，visibility隐藏之后虽然东西没了，但还站着原来的位置。
hide show
<style>
body{
border: 1px solid black;
}
#a1{
/* display: none; */
/* visibility: hidden; */
}
</style>
<script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
<script>
$(function(){
$('#a1').hide();
})
</script>
</head>
<body>
<div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
<div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
</div><div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>
这次我们使用了hide方法，跟display一样剩下了黄色和蓝色的div并且黄色跑到了顶部，
其实hide方法就相当于display none隐藏，不会保留原位置。
那么如果都设置了谁的级别更高呢？
<style>
body{
border: 1px solid black;
}
#a1{
visibility: visible;
display: none;
}
</style>
<script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
<script>
// $(function(){
// $('#a1').hide();
// })
</script>
</head>
<body>
<div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
<div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
<div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</div>
红色隐藏了，是不是说display的级别更大呢？
我们试试visibility的隐藏
<style>
body{
border: 1px solid black;
}
#a1{
visibility: hidden;
display: block;
}
</style>
<script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
<script>
// $(function(){
// $('#a1').hide();
// })
</script>
</head>
<body>
<div id="a1" style="background-color:red; height: 30px; width: 30px;"></div>
<div id="a2" style="background-color:yellow;height: 30px; width: 30px;">
</div>
<div id="a3" style="background-color:blue;height: 30px; width: 30px;"></div> </div>
</body>
这下是visibility的隐藏起作用了 那究竟是谁的级别更高呢
个人认为：谁隐藏谁级别就高，会优先执行隐藏属性，display隐藏就使用display回流，visibility隐藏就使用visibility不回流。
腾讯云开发者
