有趣的css实现隐藏元素的7种思路

独木舟 • • 建站教程

因为做网站有时候要对一些元素进行隐藏 所以找到了7种隐藏的方法 都非常好用 分享给大家

 

前言

display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。

属性 值 是否在页面上显示 注册点击事件是否有效 是否存在于可访问性树中
display none 否 否 否
visibility hidden 否 否 是
opacity 0 否 是 是

除了display、visibility、opacity三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？它们之间又存在什么必然的联系呢？这就是我们今天要讨论的问题。

注：由于篇幅有限，本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。

第一种：移除出可访问性树

display : none

display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。

第二种：隐藏元素

visibility: hidden

将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。

第三种：透明

opacity: 0

opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。

第四种：缩放

transform: scale(0, 0)

将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。

第五种：旋转

transform: rotateX(90deg)

将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。

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

脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的css样式太多了，这里只举例一种情况说明。

  • <!DOCTYPE html>

  • <html>

  •     <head>

  •         <meta name="charset" content="utf-8"/>

  •         <title>脱离屏幕显示位置</title>

  •         <style type="text/css">

  •             div {

  •                 background-color: red;

  •                 width: 100px;

  •                 height: 100px;

  •                 line-height: 100px;

  •                 text-align: center;

  •                 margin-top: 24px;

  •             }

  •             button {

  •                 background-color: black;

  •                 color: white;

  •             }

  •             #bt {

  •                 position: fixed;

  •                 top: -100px;

  •                 left: -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');

  •             let bt = document.getElementById('bt');

  •             normal.addEventListener('click',function(){

  •                 alert('click normal');   

  •             })

  •             bt.addEventListener('click',function(){

  •                 alert('click bt');   

  •             })

  •         </script>

  •     </body>

  • </html>

 

第七种：遮盖

使用元素遮盖也可以使元素不可见，因为达到这种效果的css样式也很多，故这里只举例一种情况说明。

代码：

  • <!DOCTYPE html>

  • <html>

  •     <head>

  •         <meta name="charset" content="utf-8"/>

  •         <title>遮盖</title>

  •         <style type="text/css">

  •             div {

  •                 background-color: red;

  •                 width: 100px;

  •                 height: 100px;

  •                 line-height: 100px;

  •                 text-align: center;

  •                 margin-top: 24px;

  •             }

  •             button {

  •                 background-color: black;

  •                 color: white;

  •             }

  •             #bt {

  •                 z-index: -1;

  •                 position: absolute;

  •                 top: 50%;

  •                 left: 50%;

  •                 transform: translate(-50%,-50%);

  •             }

  •             #cover {

  •                 z-index: 1;

  •                 position: absolute;

  •                 top: 0;

  •                 left: 0;

  •                 margin: 0;

  •             }

  •         </style>

  •     </head>

  •     <body>

  •         <div>

  •             <button id="normal">按钮</button>

  •         </div>

  •         <div style="position: relative;line-height: normal;">

  •             <button id="bt">按钮</button>

  •             <div id="cover"></div>

  •         </div>

  • 

  •         <script type="text/javascript">

  •             let normal = document.getElementById('normal');

  •             let bt = document.getElementById('bt');

  •             normal.addEventListener('click',function(){

  •                 alert('click normal');   

  •             })

  •             bt.addEventListener('click',function(){

  •                 alert('click bt');   

  •             })

  •         </script>

  •     </body>

  • </html>

 

给本文打分 post

版权声明： 本站相关资源均存于来自于互联网，和网友投稿发送如果侵权或资源下载地址失效，如遇此情况可于本文留言或tg：@bayuechangan 联系博主，谢谢！！
下载本站软件注意：网站分享的软件资源并非本人原创，使用之前建议虚拟机运行
链接：https://dumuzhou.org/568.html
文章版权归作者所有

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录

前言

第一种：移除出可访问性树

第二种：隐藏元素

第三种：透明

第四种：缩放

第五种：旋转

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

第七种：遮盖

关闭
目 录