元素显示隐藏的9种思路

×
目录
[1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移

前面的话

　　在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的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>

// var all = document.getElementById('cnblogs_post_body').children;
var select = [];

for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}

}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}

}
oCon.children[i].onclick = function(){
change(this);
}
}

function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>