• 技术文章 >web前端 >前端问答

    css3控制元素隐藏的方式有哪些

    青灯夜游青灯夜游2022-01-13 13:49:06原创80

    控制方式:1、使用“display:none”语句将元素移除出可访问性树,进而实现元素隐藏;2、使用“visibility: hidden”语句设置元素不可见;3、使用“opacity: 0”语句设置元素透明;4、让元素脱离屏幕显示位置等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3控制元素隐藏的方式

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

    display : none

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

    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="charset" content="utf-8"/>
            <title>display : none</title>
            <style type="text/css">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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,但此时会出现两种情况:

    这个方法跟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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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">
                p {
                    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>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <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视频教程

    以上就是css3控制元素隐藏的方式有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 元素隐藏
    上一篇:css3伪类和伪元素是什么意思 下一篇:css3转换有哪些属性

    相关文章推荐

    • css3怎样实现背景线性渐变• css3用什么表示子代选择器• css3怎样实现过几秒消失动画• CSS3 clip-path属性实战:动态区域裁剪• CSS3设置动画的相关属性有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网