css隐藏元素的7种思路
前言
display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。
| 属性 | 值 | 是否在页面上显示 | 注册点击事件是否有效 | 是否存在于可访问性树中 |
|---|---|---|---|---|
| display | none | 否 | 否 | 否 |
| visibility | hidden | 否 | 否 | 是 |
| opacity | 0 | 否 | 是 | 是 |
除了display、visibility、opacity三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？它们之间又存在什么必然的联系呢？这就是我们今天要讨论的问题。
注：由于篇幅有限，本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。
第一种：移除出可访问性树
display : none
display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>display : none</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 display : none; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
第二种：隐藏元素
visibility: hidden
将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>visibility: hidden</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 visibility: hidden; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
第三种：透明
opacity: 0
opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>opacity: 0</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 opacity: 0; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
transparent
将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>transparent</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 color: transparent; 21 background-color: transparent; 22 border-color: transparent; 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 <button id="normal">按钮</button> 29 </div> 30 <div> 31 <button id="bt">按钮</button> 32 </div> 33 34 <script type="text/javascript"> 35 let normal = document.getElementById('normal'); 36 let bt = document.getElementById('bt'); 37 normal.addEventListener('click',function(){ 38 alert('click normal'); 39 }) 40 bt.addEventListener('click',function(){ 41 alert('click bt'); 42 }) 43 </script> 44 </body> 45 </html>
rgba(0,0,0,0)
从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>rgba(0,0,0,0)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 color: rgba(0,0,0,0); 21 background-color: rgba(0,0,0,0); 22 border-color: rgba(0,0,0,0); 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 <button id="normal">按钮</button> 29 </div> 30 <div> 31 <button id="bt">按钮</button> 32 </div> 33 34 <script type="text/javascript"> 35 let normal = document.getElementById('normal'); 36 let bt = document.getElementById('bt'); 37 normal.addEventListener('click',function(){ 38 alert('click normal'); 39 }) 40 bt.addEventListener('click',function(){ 41 alert('click bt'); 42 }) 43 </script> 44 </body> 45 </html>
rgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>hsla(0,0%,0%,0)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 color: hsla(0,0%,0%,0); 21 background-color: hsla(0,0%,0%,0); 22 border-color: hsla(0,0%,0%,0); 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 <button id="normal">按钮</button> 29 </div> 30 <div> 31 <button id="bt">按钮</button> 32 </div> 33 34 <script type="text/javascript"> 35 let normal = document.getElementById('normal'); 36 let bt = document.getElementById('bt'); 37 normal.addEventListener('click',function(){ 38 alert('click normal'); 39 }) 40 bt.addEventListener('click',function(){ 41 alert('click bt'); 42 }) 43 </script> 44 </body> 45 </html>
hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)
filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>filter: opacity(0%)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 filter: opacity(0%); 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
第四种：缩放
transform: scale(0, 0)
将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>transform: scale(0, 0)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 transform: scale(0,0); 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
width: 0;height: 0;overflow: hidden
将width和height都设置为0，使元素占用像素比为0*0，但此时会出现两种情况：
当元素的display属性为inline时，元素内容会将元素宽高拉开；
当元素的display属性为block或inline-block时，元素宽高为0，但元素内容依旧正常显示，此时再加上overflow:hidden;即可裁剪掉元素外的元素内容。
这个方法跟transform: scale(0,0)的不同点在于：transform: scale(0,0)是将元素与内容都进行缩放，而此方法是将元素缩放到0px，再裁剪掉元素外的元素内容。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>width: 0;height: 0;overflow: hidden</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 width:0; 21 height:0; 22 overflow: hidden; 23 border-width: 0;/* user agent stylesheet中border-width: 2px; */ 24 padding: 0;/* user agent stylesheet中padding: 1px 6px; */ 25 } 26 </style> 27 </head> 28 <body> 29 <div> 30 <button id="normal">按钮</button> 31 </div> 32 <div> 33 <button id="bt">按钮</button> 34 </div> 35 36 <script type="text/javascript"> 37 let normal = document.getElementById('normal'); 38 let bt = document.getElementById('bt'); 39 normal.addEventListener('click',function(){ 40 alert('click normal'); 41 }) 42 bt.addEventListener('click',function(){ 43 alert('click bt'); 44 }) 45 </script> 46 </body> 47 </html>
第五种：旋转
transform: rotateX(90deg)
将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>transform: rotateX(90deg)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 transform: rotateX(90deg); 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
transform: rotateY(90deg)
将元素沿着Y轴顺时针旋转90度达到隐藏元素的效果。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>transform: rotateY(90deg)</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 transform: rotateY(90deg); 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <button id="normal">按钮</button> 27 </div> 28 <div> 29 <button id="bt">按钮</button> 30 </div> 31 32 <script type="text/javascript"> 33 let normal = document.getElementById('normal'); 34 let bt = document.getElementById('bt'); 35 normal.addEventListener('click',function(){ 36 alert('click normal'); 37 }) 38 bt.addEventListener('click',function(){ 39 alert('click bt'); 40 }) 41 </script> 42 </body> 43 </html>
第六种：脱离屏幕显示位置
脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的css样式太多了，这里只举例一种情况说明。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>脱离屏幕显示位置</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 position: fixed; 21 top: -100px; 22 left: -100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 <button id="normal">按钮</button> 29 </div> 30 <div> 31 <button id="bt">按钮</button> 32 </div> 33 34 <script type="text/javascript"> 35 let normal = document.getElementById('normal'); 36 let bt = document.getElementById('bt'); 37 normal.addEventListener('click',function(){ 38 alert('click normal'); 39 }) 40 bt.addEventListener('click',function(){ 41 alert('click bt'); 42 }) 43 </script> 44 </body> 45 </html>
第七种：遮盖
使用元素遮盖也可以使元素不可见，因为达到这种效果的css样式也很多，故这里只举例一种情况说明。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="charset" content="utf-8"/> 5 <title>遮盖</title> 6 <style type="text/css"> 7 div { 8 background-color: red; 9 width: 100px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 margin-top: 24px; 14 } 15 button { 16 background-color: black; 17 color: white; 18 } 19 #bt { 20 z-index: -1; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 transform: translate(-50%,-50%); 25 } 26 #cover { 27 z-index: 1; 28 position: absolute; 29 top: 0; 30 left: 0; 31 margin: 0; 32 } 33 </style> 34 </head> 35 <body> 36 <div> 37 <button id="normal">按钮</button> 38 </div> 39 <div style="position: relative;line-height: normal;"> 40 <button id="bt">按钮</button> 41 <div id="cover"></div> 42 </div> 43 44 <script type="text/javascript"> 45 let normal = document.getElementById('normal'); 46 let bt = document.getElementById('bt'); 47 normal.addEventListener('click',function(){ 48 alert('click normal'); 49 }) 50 bt.addEventListener('click',function(){ 51 alert('click bt'); 52 }) 53 </script> 54 </body> 55 </html>
