CSS隐藏元素的几种方法,css让元素隐藏
前言
显示、可见度、不透明度三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。
属性值是否在页面上显示注册点击事件是否有效是否存在于可访问性树中不显示否否否隐藏可见性否否是不透明度0否是是
除了显示、可见度、不透明度三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？它们之间又存在什么必然的联系呢？这就是我们今天要讨论的问题。
注：由于篇幅有限，本文并未提及一些像滤镜：阿尔法(不透明度=0);缩放：0;之类的兼容属性。
第一种：移除出可访问性树
显示：无
显示属性可以设置元素的内部和外部显示类型。将显示设置为没有人会将元素从可访问性树中移除。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title display:none/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt {显示：无；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第二种：隐藏元素
可见性：隐藏
将能见度设置为隐藏的会使元素不可见，但此时元素仍然位于可访问性树中（显示：无时元素被移出可访问性树),注册点击事件无效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title visibility:hidden/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt可见性：隐藏；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第三种：透明
不透明度：0
不透明度（不透明度),取值范围0(完全透明) ~ 1(完全不透明),将不透明设置为0会使元素完全透明，此时元素不可见（因为它是透明的),仍然位于可访问性树中，注册点击事件有效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title opacity:0/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} # Bt { opacity:0；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html透明
将元素的背景色、颜色和边框颜色设置为透明（透明),此时元素不可见（因为它是透明的),仍然位于可访问性树中，注册点击事件有效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title transparent/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt { color:透明；背景色：透明；边框颜色：透明；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；}) /script /body/htmlrgba(0，0，0，0)
从技术上说，透明是rgba(0，0，0，0)的简写，将元素的背景色、颜色和边框颜色设置为rgba(0，0，0，0)(透明),此时元素不可见（因为它是透明的),仍然位于可访问性树中，注册点击事件有效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title rgba(0，0，0，0)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt { color: rgba(0，0，0，0)；背景色：rgba(0，0，0，0)；边框颜色：rgba(0，0，0，0)；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；}) /script /body/htmlrgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0，0%，0%，0)
高强度低合金高力低合金使用元素隐藏的机制与颜色一致，都是由第四个参数希腊字母的第一个字母所控制的，将元素的背景色、颜色和边框颜色设置为hsla(0，0%，0%，0)、此时元素不可见（因为它是透明的),仍然位于可访问性树中，注册点击事件有效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title HSLA(0，0%，0%，0)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt { color: hsla(0，0%，0%，0)；背景色：hsla(0，0%，0%，0)；边框颜色：hsla(0，0%，0%，0)；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；}) /script /body/htmlhsla和颜色一致，只需要第四个参数为0即可达到隐藏元素的效果。
滤镜：不透明度(0%)
过滤器（滤镜)不透明度(0% ~ 100%)转化图像的透明程度，值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的过滤器设置为不透明度(0%),此时元素不可见（因为它是透明的),仍然位于可访问性树中，注册点击事件有效。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title filter:opacity(0%)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt滤镜：不透明度(0%);}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第四种：缩放
转换：缩放(0,0)
将改变设置为刻度(0,0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%,元素和内容占用像素比为0*0,所以看不到此元素及其内容，也无法点击。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title transform:scale(0，0)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt { transform: scale(0，0)；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/script/body/html宽度：0；高度：0;溢出：隐藏
将宽度和高度都设置为0,使元素占用像素比为0*0,但此时会出现两种情况：
当元素的显示属性为在一条直线上的时，元素内容会将元素宽高拉开；
当元素的显示属性为街区或内嵌块时，元素宽高为0,但元素内容依旧正常显示，此时再加上溢出：隐藏；即可裁剪掉元素外的元素内容。
这个方法跟变换：缩放(0,0)的不同点在于：变换：缩放(0,0)是将元素与内容都进行缩放，而此方法是将元素缩放到0px，再裁剪掉元素外的元素内容。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title width:0；高度：0;溢出：hidden/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} # Bt { width:0；高度：0;溢出：隐藏；边框宽度：0;/*用户代理样式表中边框宽度：2px*/填充：0;/*用户代理样式表中填充：1px 6px */}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第五种：旋转
转换：rotateX(90度)
将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title transform:rotateX(90度)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} # Bt { transform:rotateX(90度)；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/script/body/html转换：rotateY(90度)
将元素沿着Y轴顺时针旋转90度达到隐藏元素的效果。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title transform:rotateY(90度)/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} # Bt { transform:rotateY(90度)；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第六种：脱离屏幕显示位置
脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的钢性铸铁样式太多了，这里只举例一种情况说明。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title脱离屏幕显示位置/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} #bt位置：固定；top:-100px；左：-100px；}/style/head body div button id= normal 按钮/button /div div button id=bt 按钮/button/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/脚本/正文/html
第七种：遮盖
使用元素遮盖也可以使元素不可见，因为达到这种效果的钢性铸铁样式也很多，故这里只举例一种情况说明。
代码：
！DOCTYPE html html head meta name= charset content= utf-8 /title遮盖/title style type= text/CSS div { background-color:red；宽度：100像素高度：100像素行高：100像素文本对齐：居中；边距-顶部：24px}按钮{背景色：黑色；颜色：白色；} # Bt { z-index:-1；位置：绝对；top:50%；左：50%;transform: translate(-50%，-50%)；} #封面{ z索引：1;位置：绝对；top:0；左：0;边距：0;}/style/head body div button id= normal 按钮/button /div div style=position:相对；行高：正常；按钮id=bt 按钮/button div id= cover /div/div script type= text/JavaScript let normal=document。getelementbyid(“normal”)；设Bt=文档。getelementbyid( Bt )；normal.addEventListener(click ，function(){ alert( click normal )；}) bt.addEventListener(click ，function(){ alert( click Bt )；})/script/body/html
参考
[1]display MDN[2]visibility MDN[3]opacity MDN[4]transform MDN[5]overflow MDN[6]color MDN[7]transform MDN[8]z-index MDN[9]CSS3颜色值颜色表示方式[10] 一个也许很傻的问题，在图像处理中希腊字母的第一个字母到底是什么？
到此这篇关于有趣的css实现隐藏元素的7种思路的文章就介绍到这了,更多相关css隐藏元素内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。