元素的显示与隐藏（让一个元素“看不见”的方式）
- 常规：
display: none;visibility: hidden;opacity: 0;
- 其他（以下消失都是有前提条件的）：（注：这里 etc 的意思是 等等）
- height: 0; width: 0; padding: 0; margin: 0; border: 0; ... etc
- position: absolute; left: 1000000px; top: 100000px; ...etc;
- z-index: -1000; ...etc
- background-color: rgba(0, 0, 0, 0);
- 总结：元素“看不见”的方式主要方式让元素用户在当前页面展示的视口里看不见。
- 区别：
- display: none; 从文档流消失，不占据文档空间，但是还存在DOM树中
- visibility: hidden; 和 opacity: 0; 还是会占据文档空间
- display: none; 和 visibility: hidden; 绑定的事件不会触发
- opacity: 0; 的元素绑定的事件还是会触发事件
display
- 对于元素显隐来说，最常见就是
display: none; | display: block;，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等
- 如果要适用于任何元素需要提前储存元素的display值
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background: lightblue; width: 100px; height: 60px; margin-top: 10px;">测试文字</div>
<script type="text/javascript">
show.onclick = function(){
test.style.display = 'block';
}
hide.onclick = function(){
test.style.display = 'none';
}
</script>
</body>
visibility
-
visibility: hidden;与display: none;作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到，如果父级设置display: none;子级设置display: block;也不会显示；而如果父级设置visibility: hidden;子级设置visibility: visible;时子级会显示出来
- visibility 可应用 transition 属性。因为 visibility 是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。
visibility: hidden;可以看成visibility: 0;；visibility: visible;可以看成visibility: 1;。于是，visibility 应用 transition 等同于0~1之间的过渡效果。实际上，只要 visibility 的值大于0就是显示的。由于这个现象，我们可以利用 transition 实现元素的延时显示隐藏
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background: lightblue; width: 100px; height: 60px; margin-top: 10px;">测试文字</div>
<script type="text/javascript">
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>
</body>
hidden
- HTML有个hidden全局属性，专门用于显示隐藏元素，与
display: none;的作用类似，元素隐藏时脱离文档流，无法接受javascript事件
- 注意：IE7-不支持，IE10-不支持
test.hidden = 'hidden';写法，只支持test.setAttribute('hidden', 'hidden');写法
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background: lightblue; width: 100px; height: 60px; margin-top: 10px;">测试文字</div>
<script type="text/javascript">
show.onclick = function(){
test.removeAttribute('hidden');
/*test.hidden = '';*/
}
hide.onclick = function(){
test.setAttribute('hidden', 'hidden');
/*test.hidden = 'hidden';*/
}
</script>
</body>
opacity
- 对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是
display: none;和visibility: hidden;所不具备的
<body>
<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 type="text/javascript">
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>
</body>
overflow
-
overflow: hidden;代表着溢出隐藏。我们可以利用父级的overflow: hidden;配合父级的height: 0;或width: 0;来实现元素的显隐
<style type="text/css">
#testWrap{
height: 70px;
transition: height 1s;
overflow: hidden;
}
</style>
</head>
<body>
<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 type="text/javascript">
show.onclick = function(){
testWrap.style.height = '70px';
}
hide.onclick = function(){
testWrap.style.height = '0';
}
</script>
</body>
clip
- CSS裁剪clip这个属性平时用的不多，当
clip: rect(top, right, bottom, left);中的top >= bottom，或者left >= right时，可实现元素的隐藏效果，效果类似于visibility: hidden;
- 注意：clip属性只能应用在绝对定位或固定定位元素上
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test" style="background: lightblue; width: 100px; height: 60px; margin-top: 10px;">测试文字</div>
<script type="text/javascript">
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>
</body>
transform
- CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果
- 注意：IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀
<style type="text/css">
div{
width: 100px;
height: 60px;
margin-bottom: 10px;
background: lightblue;
}
</style>
</head>
<body>
<button id="show1">显示</button>
<button id="hide1">隐藏</button>
<div id="test1">测试文字1</div>
<button id="show2">显示</button>
<button id="hide2">隐藏</button>
<div id="test2">测试文字2</div>
<button id="show3">显示</button>
<button id="hide3">隐藏</button>
<div id="test3">测试文字3</div>
<script type="text/javascript">
// transform:scale(0) 时，元素被隐藏
show1.onclick = function(){
test1.style.transform ='scale(1)';
}
hide1.onclick = function(){
test1.style.transform ='scale(0)';
}
// transform:rotateX(90deg) 时，元素被隐藏
show2.onclick = function(){
test2.style.transform ='rotateX(0)';
}
hide2.onclick = function(){
test2.style.transform ='rotateX(90deg)';
}
// transform:skew(90deg) 时，元素被隐藏
show3.onclick = function(){
test3.style.transform ='skew(0)';
}
hide3.onclick = function(){
test3.style.transform ='skew(90deg)';
}
</script>
</body>
覆盖
- 利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果
<style type="text/css">
/*鼠标移入移出会出现元素的显隐效果*/
#test:hover:before{
content: "";
position: absolute;
width: 100px;
height: 60px;
background-color: white;
}
</style>
</head>
<body>
<div id="test" style="background: lightblue; width: 100px; height: 60px; margin-top: 10px;">测试内容</div>
</body>
偏移
- 元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果
<style type="text/css">
div{
width: 100px;
height: 60px;
margin-top: 10px;
background: lightblue;
transition: 0.5s;
}
#test2{
position: relative;
/*position: absolute;*/
}
</style>
</head>
<body>
<button id="show1">显示</button>
<button id="hide1">隐藏</button>
<div id="test1">测试内容1</div>
<button id="show2">显示</button>
<button id="hide2">隐藏</button>
<div id="test2">测试内容2</div>
<button id="show3">显示</button>
<button id="hide3">隐藏</button>
<div id="test3">测试内容3</div>
<script type="text/javascript">
// margin-top
// 利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动
show1.onclick = function(){
test1.style.marginTop = '10px';
}
hide1.onclick = function(){
test1.style.marginTop = '-9999px';
}
// left
// 通过设置相对定位或绝对定位元素的偏移属性，将元素移动到视窗外
show2.onclick = function(){
test2.style.left ='0';
}
hide2.onclick = function(){
test2.style.left ='-9999px';
}
// translate
show3.onclick = function(){
test3.style.transform ='translate(0, 0)';
}
hide3.onclick = function(){
test3.style.transform ='translate(-9999px, -9999px)';
}
</script>
</body>
网友评论