在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路
display
对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline、inline-block等
注意:如果要适用于任何元素需要提前储存元素的display值
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
<script>
show.onclick = function(){
test.style.display = 'block';
}
hide.onclick = function(){
test.style.display = 'none';
}
</script>
visibility
visibility:hidden与display:none作为隐藏元素的两种方式,常常被人们拿来比较。其实区别很简单,前者不脱离文档流,保留隐藏之前元素占据的物理区域;而后者则脱离文档流,如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到,如果父级设置display:none;子级设置display:block也不会显示;而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来
注意:visilibity可应用transition属性。因为visibility是离散步骤,在0到1数字范围之内,0表示隐藏,1表示显示。visibility:hidden可以看成visibility:0;visibility:visible可以看成visibility:1。于是,visibility应用transition等同于0~1之间的过渡效果。实际上,只要visibility的值大于0就是显示的。由于这个现象,我们可以利用transition实现元素的延时显示隐藏
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
<script>
show.onclick = function(){
test.style.transition = 'none';
test.style.visibility = 'visible';
}
hide.onclick = function(){
test.style.transition &