当前位置: 萬仟网 > IT编程>网页制作>CSS > 有趣的css实现隐藏元素的7种思路

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

2021年02月02日  | 萬仟网IT编程  | 我要评论
前言display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。 属性 值

前言

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

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

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

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

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

display : none

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

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</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 {
                display : none;
            }
        </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>

第二种:隐藏元素

visibility: hidden

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

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>visibility: hidden</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 {
                visibility: hidden;
            }
        </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>

第三种:透明

opacity: 0

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

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>opacity: 0</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 {
                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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

transparent

将元素的background-color、color和border-color设置为transparent(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transparent</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 {
                color: transparent;
                background-color: transparent;
                border-color: transparent;
            }
        </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>

rgba(0,0,0,0)

从技术上说,transparent是 rgba(0,0,0,0) 的简写,将元素的background-color、color和border-color设置为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;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: rgba(0,0,0,0);
                background-color: rgba(0,0,0,0);
                border-color: 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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

rgba只需要第四个参数为0即可达到隐藏元素的效果。

hsla(0,0%,0%,0)

hsla使用元素隐藏的机制与rgba一致,都是由第四个参数alpha所控制的,将元素的background-color、color和border-color设置为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;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: hsla(0,0%,0%,0);
                background-color: hsla(0,0%,0%,0);
                border-color: 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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

hsla和rgba一致,只需要第四个参数为0即可达到隐藏元素的效果。

filter: opacity(0%)

filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>filter: opacity(0%)</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 {
                filter: 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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第四种:缩放

transform: scale(0, 0)

将transform设置为scale(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;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</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,再裁剪掉元素外的元素内容。

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>width: 0;height: 0;overflow: hidden</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 {
                width:0;
                height:0;
                overflow: hidden;
                border-width: 0;/* user agent stylesheet中border-width: 2px; */
                padding: 0;/* user agent stylesheet中padding: 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');
            let bt = document.getelementbyid('bt');
            normal.addeventlistener('click',function(){
                alert('click normal');   
            })
            bt.addeventlistener('click',function(){
                alert('click bt');   
            })
        </script>
    </body>
</html>

第五种:旋转

transform: rotatex(90deg)

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

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: rotatex(90deg)</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 {
                transform: rotatex(90deg);
            }
        </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>

transform: rotatey(90deg)

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

代码:

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: rotatey(90deg)</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 {
                transform: rotatey(90deg);
            }
        </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 {
                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>

参考

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • ES6中Promisecatch与Javacatch对比讲解

    对比学习法是一种不错的总结、提高技巧。有过Java开发经验的人,在学习ES6 Promise catch用法时,总会不由自主地产生交叉联想。... [阅读全文]
  • Bootstrap4 轮播+模态框+提示框+弹出框

    Bootstrap4 轮播 菜鸟教程上的案例 <div id="demo" class="carousel slid... [阅读全文]
  • CSS总结

    CSS总结

    CSS总结css基础知识CSS:层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的... [阅读全文]
  • 10分钟理解CSS3 Grid布局

    10分钟理解CSS3 Grid布局

    Grid做前端的同学应该都很熟悉了,这篇文章主要介绍了10分钟理解CSS3 Grid布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看... [阅读全文]
  • 后台使用nodejs的好处或者优势罗列例举

     后台使用nodejs的好处或者优势 nodejs基于javascript语言,不用再单独新学一门陌生的语言,从而减低了学习的门槛。同时,java... [阅读全文]
  • 一个可以互相解决前端问题的地方

    我新建了一个web前端的新手交流群,包括基础知识和刚入职的技术分享,人还不多,期待着每一个人的加入,希望可以得到你的认同哦~你的加入是我组织交流群的... [阅读全文]
  • 浮动介绍和定位注意点

    18年元月24日,一如既往的写了一会,外面下着雪,我在屋内叼着烟,上班好辛苦,成人的世界哪有容易二字,慢慢来,少年你还年轻,重在坚持,不要灰心。 .... [阅读全文]
  • 2016年 CodePen 最热门的前端代码 Top 100

    每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带来灵感。 同时从 Codep... [阅读全文]
  • 如何在HTML中设置文本的大小写

    text transform属性介绍 属性就是设置 页面中的标签里面的文本大小写, 属性常用的属性值有三种: 、`uppercase lowerca... [阅读全文]
  • 导航条

    bootstrap中的导航条 一、和导航的区别 1. 导航条比导航多了一个条字 2. 直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com