有趣的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/%e6%9c%89%e8%b6%a3%e7%9a%84css%e5%ae%9e%e7%8e%b0%e9%9a%90%e8%97%8f%e5%85%83%e7%b4%a0%e7%9a%847%e7%a7%8d%e6%80%9d%e8%b7%af/
文章版权归作者所有

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