在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的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>
var show = document.querySelector("#show");
var hide = document.querySelector("#hide");
var test = document.querySelector("#test");
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>
<script>
var show = document.querySelector("#show");
var hide = document.querySelector("#hide");
var test = document.querySelector("#test");
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事件
<p hidden="hidden">这是一段隐藏的段落。</p> <p>这是一段可见的段落。</p>
opacity
对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display:none和visiblity:hidden所不具备的。
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
<script>
var show = document.querySelector("#show");
var hide = document.querySelector("#hide");
var test = document.querySelector("#test");
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 = "800px";
this.style.height = "200px";
this.style.backgroundColor = 'red';
}
</script>
overflow
CSS中有一个属性是overflow，overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或0来实现元素的显隐
<button id="show">显示</button>
<button id="hide">隐藏</button>
<style>
#testWrap{
height: 70px;
transition: height 1s;
overflow: hidden;
}
</style>
<div id="testWrap">
<div id="test">测试文字</div>
</div>
<script>
var show = document.querySelector("#show");
var hide = document.querySelector("#hide");
var test = document.querySelector("#test");
var testWrap = document.querySelector("#testWrap");
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">测试文字</div>
<script>
var show = document.querySelector("#show");
var hide = document.querySelector("#hide");
var test = document.querySelector("#test");
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矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果
- scale
transform:scale(0)时，元素被隐藏
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</div> <script> var show = document.querySelector("#show"); var hide = document.querySelector("#hide"); var test = document.querySelector("#test"); show.onclick = function(){ test.style.transform = 'scale(1)'; } hide.onclick = function () { test.style.transform = 'scale(0)'; } </script> - rotate
transform:rotateX(90deg)时，元素被隐藏 - skew
transform:skew(90deg)时，元素被隐藏
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</div> <script> var show = document.querySelector("#show"); var hide = document.querySelector("#hide"); var test = document.querySelector("#test"); show.onclick = function(){ test.style.transform = 'rotateX(0)'; } hide.onclick = function () { test.style.transform = 'rotateX(90deg)'; } </script>
覆盖
利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果
<style>
#test:hover:before {
content: "";
position: absolute;
100px;
height: 60px;
background-color: white;
}
</style>
<div id="test">测试文字</div>
偏移
元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果
- margin-top
利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</div> <script> var show = document.querySelector("#show"); var hide = document.querySelector("#hide"); var test = document.querySelector("#test"); show.onclick = function(){ test.style.marginTop = '10px'; } hide.onclick = function () { test.style.marginTop = '-9999px'; } </script> - left
通过设置相对定位或绝对定位元素的偏移属性，将元素移动到视窗外
<style> #test { position:relative; } </style> <button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</div> <script> var show = document.querySelector("#show"); var hide = document.querySelector("#hide"); var test = document.querySelector("#test"); show.onclick = function(){ test.style.left = '0px'; } hide.onclick = function () { test.style.left = '-9999px'; } </script> - translate
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</div> <script> var show = document.querySelector("#show"); var hide = document.querySelector("#hide"); var test = document.querySelector("#test"); show.onclick = function(){ test.style.transform = 'translate(0,0)'; } hide.onclick = function () { test.style.transform = 'translate(-9999px,-9999px)'; } </script>
转载自https://www.toutiao.com/i6779788570564493836/