zoukankan html css js c++ java

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                  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                  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                  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                  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                  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                  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                  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                  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>

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> 0;height: 0;overflow: hidden</title>
 6         <style type="text/css">
 7             div {
 8                 background-color: red;
 9                  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                 0;
21                 height:0;
22                 overflow: hidden;
23                 border- 0;/* user agent stylesheet中border- 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                  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                  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                  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                  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>

查看全文

相关阅读:
POJ1521 最优哈夫曼编码树贪心算法的有效应用
 hdu4911逆序对+mergesort
hdu1735 字数统计贪心算法
 最大不相交区间数+最少区间数覆盖问题贪心思想
 洛谷1010 幂次方分治算法+掩码的应用
 POJ 2082 三种解法（暴力+树状数组+线段树）
POJ3134 Power Calculus IDA*搜索的一个应用
 hdu2648 STL map的简单应用
 Delphi 数据类型与Windows 数据类型对照
 Delphi Window Messages 消息

原文地址：https://www.cnblogs.com/lgx5/p/14458413.html