经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
有趣的css实现隐藏元素的7种思路_CSS教程_CSS
来源：jb51　　时间：2021/2/18 14:50:02　　对本文有异议

前言

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

第二种：隐藏元素

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

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

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

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

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

第六种：脱离屏幕显示位置

脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的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>

参考

到此这篇关于有趣的css实现隐藏元素的7种思路的文章就介绍到这了,更多相关css隐藏元素内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号