欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

元素显示隐藏的9种思路 - 小火柴的蓝色理想

程序员文章站 2022-03-24 18:13:27
...

前面的话

  在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路

思路一: display

  对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline、inline-block等

  [注意]如果要适用于任何元素需要提前储存元素的display值

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试文字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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试文字div>
script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}
script>

思路三: hidden

  可能有些人不太熟悉,HTML有个hidden全局属性,专门用于显示隐藏元素,与display:none的作用类似,元素隐藏时脱离文档流,无法接受javascript事件

  [注意]IE7-不支持,IE10-不支持test.hidden='hidden'写法,只支持test.setAttribute('hidden','hidden')写法

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试文字div>
script>
show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
script>    

思路四: opacity

  对于元素显隐,opacity的使用频率也挺多。opacity的好处是,即使opacity为0的元素,仍然可以接受javascript事件,这是display:none和visiblity:hidden所不具备的。

button id="show">显示button>
button id="hide">隐藏button>
button id="reset">还原button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试文字div>
script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}
script>    

思路五: overflow

  CSS中有一个属性是overflow,overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

  [注意]当设置overflow的元素在绝对定位元素和其包含块之间的时候,overflow属性会失效

style>
#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}
style>
button id="show">显示button>
button id="hide">隐藏button>
div id="testWrap">
    div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试内容div>        
div>
script>
show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}
script>    

思路六: clip

  CSS裁剪clip这个属性平时用的不多,当clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right时,可实现元素的隐藏效果,效果类似于visibility:hidden

  [注意]clip属性只能应用在绝对定位元素上

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试内容div>    
script>
show.onclick = function(){
    test.style.position ='static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position ='absolute';
    test.style.clip = 'rect(0 0 0 0)';
}
script>    

思路七: transform

  CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

  [注意]IE9-浏览器不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

【1】scale

  transform:scale(0)时,元素被隐藏

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>    
script>
show.onclick = function(){
    test.style.transform ='scale(1)';
}    
hide.onclick = function(){
    test.style.transform ='scale(0)';
}
script>    

【2】rotate

  transform:rotateX(90deg)时,元素被隐藏

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>
script>
show.onclick = function(){
    test.style.transform ='rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform ='rotateX(90deg)';
}
script>

【3】skew

  transform:skew(90deg)时,元素被隐藏

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>
script>
show.onclick = function(){
    test.style.transform ='skew(0)';
}    
hide.onclick = function(){
    test.style.transform ='skew(90deg)';
}
script>

思路八: 覆盖

  利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸,通过控制伪元素的定位属性,实现显隐效果

style>
#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}    
style>
div style="background:lightblue;width:100px;height:60px;margin-top: 10px;">测试内容div>

//鼠标移入移出会出现元素的显隐效果

思路九: 偏移

  元素显示隐藏的另一种常见思路是偏移,将元素移动到视窗范围外,也可以实现等价的显隐效果

【1】margin-top

  利用负margin将元素移出视窗外,要注意的是设置负margin的元素并没有脱离普通流,后续元素会跟着一起移动

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>
script>
show.onclick = function(){
    test.style.marginTop ='10px';
}    
hide.onclick = function(){
    test.style.marginTop ='-9999px';
}
script>

【2】left

  通过设置相对定位绝对定位元素的偏移属性,将元素移动到视窗外

style>
#test{
    position: relative;
/*  position: absolute; */
}    
style>
button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>    
script>
show.onclick = function(){
    test.style.left ='0';
}    
hide.onclick = function(){
    test.style.left ='-9999px';
}
script>    

【3】translate

button id="show">显示button>
button id="hide">隐藏button>
div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">测试内容div>    
script>
show.onclick = function(){
    test.style.transform ='translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform ='translate(-9999px,-9999px)';
}
script>