在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的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> 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> 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事件
注意:IE10-不支持test.hidden='hidden'写法,只支持test.setAttribute('hidden','hidden')写法
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试文字</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">测试文字</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">测试内容</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">测试内容</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">测试内容</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">测试内容</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">测试内容</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>测试内容</div> //鼠标移入移出会出现元素的显隐效果
偏移
元素显示隐藏的另一种常见思路是偏移,将元素移动到视窗范围外,也可以实现等价的显隐效果
【1】margin-top
利用负margin将元素移出视窗外,要注意的是设置负margin的元素并没有脱离普通流,后续元素会跟着一起移动
<button id="show">显示</button> <button id="hide">隐藏</button> <div id="test">测试内容</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">测试内容</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">测试内容</div>
<script> show.onclick = function(){ test.style.transform ='translate(0,0)'; } hide.onclick = function(){ test.style.transform ='translate(-9999px,-9999px)'; } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]