css元素显⽰隐藏的9种思路
媳妇的美好宣言在⽹页制作中，元素的显⽰隐藏是⾮常常见的需求。本⽂将介绍元素显⽰隐藏的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>
test.style.display = 'block';
}
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>
<script>
ansition = 'none';
湘夫人赏析test.style.visibility = 'visible';
}
ansition = 'visibility 0.2s 0.5s';
test.style.visibility = 'hidden';
}
</script>
hidden
可能有些⼈不太熟悉，HTML有个hidden全局属性，专门⽤于显⽰隐藏元素，与display:none的作⽤类似，元素隐藏时脱离⽂档流，⽆法接受javascript事件
注意：IE10-不⽀持test.hidden='hidden'写法，只⽀持test.tAttribute('hidden','hidden')写法
<button id="show">显⽰</button>
<button id="hide">隐藏</button>
<div id="test">测试⽂字</div>
<script>
/*test.hidden = '';*/
}
test.tAttribute('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="ret">还原</button>
<div id="test">测试⽂字</div>
<script>
ansition = 'none';
test.style.opacity = '1';
}
ansition = 'opacity 0.2s';
test.style.opacity = '0';
}
this.style.width = '200px';
}
<();
}
</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">测试内容</div>
</div>
半山半水打一字<script>
testWrap.style.height = '70px';
}
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">测试内容</div>
<script>
test.style.position ='static';
test.style.clip = 'auto';
}一个老头不跑不走
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">测试内容</div>
玉石知识<script>
ansform ='scale(1)';
}
ansform ='scale(0)';
}
</script>
【2】rotate
transform:rotateX(90deg)时，元素被隐藏
<button id="show">显⽰</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
ansform ='rotateX(0)';
}
ansform ='rotateX(90deg)';
}
</script>
【3】skew
transform:skew(90deg)时，元素被隐藏
绝地求生按键
<button id="show">显⽰</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
ansform ='skew(0)';
}
ansform ='skew(90deg)';
}
</script>
覆盖
利⽤定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺⼨，通过控制伪元素的定位属性，实现显隐效果
<style>
#test:hover:before{
content: "";
position: absolute;
width: 100px;
height: 60px;
background-color: white;
}
</style>
<div>测试内容</div>
//⿏标移⼊移出会出现元素的显隐效果
偏移
元素显⽰隐藏的另⼀种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果
【1】margin-top
利⽤负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着⼀起移动<button id="show">显⽰</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
test.style.marginTop ='10px';
}
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">测试内容</div>
<script>
test.style.left ='0';
}
test.style.left ='-9999px';
}
</script>
【3】translate
<button id="show">显⽰</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
ansform ='translate(0,0)';
}
ansform ='translate(-9999px,-9999px)';
}
</script>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
