7 interesting ways to achieve hidden elements in CSS

Preface

The similarities and differences between the three attributes of hidden elements, display, visibility, and opacity, have always been a common question in front-end job interviews.

property	value	Whether to display on the page	Is the registration click event valid?	Is it present in the accessibility tree?
display	none	no	no	no
visibility	hidden	no	no	yes
opacity	0	no	yes	yes

In addition to the display, visibility, and opacity attributes that can hide elements, are there other attributes that can hide elements? What inevitable connection exists between them? That’s what we’re going to discuss today.

Note: Due to limited space, this article does not mention some compatible properties such as filter:alpha(opacity=0); zoom:0;.

First: Remove from the accessibility tree

display : none

The display property can set the internal and external display type of an element. Setting display to none removes the element from the accessibility tree.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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>

The second type: hidden elements

visibility: hidden

Setting visibility to hidden makes the element invisible, but the element is still in the accessibility tree (the element is removed from the accessibility tree when display: none is set), and registering click events has no effect.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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>

The third type: transparent

opacity: 0

opacity (opacity), the value range is 0 (completely transparent) ~ 1 (completely opaque). Setting opacity to 0 will make the element completely transparent. At this time, the element is invisible (because it is transparent), but it is still in the accessibility tree, and the registered click event is valid.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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

Set the element's background-color, color, and border-color to transparent. The element is now invisible (because it is transparent), but is still in the accessibility tree, and registered click events are valid.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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)

Technically, transparent is a shorthand for rgba(0,0,0,0), which sets the background-color, color, and border-color of an element to rgba(0,0,0,0) (transparent). At this time, the element is invisible (because it is transparent), but it is still in the accessibility tree, and registered click events are valid.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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 only needs the fourth parameter to be 0 to achieve the effect of hiding the element.

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

The element hiding mechanism used by hsla is consistent with rgba, which is controlled by the fourth parameter Alpha. The background-color, color, and border-color of the element are set to hsla (0, 0%, 0%, 0). At this time, the element is invisible (because it is transparent), but it is still located in the accessibility tree, and the registered click event is valid.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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 and rgba are the same, and only the fourth parameter needs to be 0 to achieve the effect of hiding the element.

filter: opacity(0%)

filter opacity (0% ~ 100%) converts the transparency of the image, with the value range being 0% (completely transparent) ~ 100% (completely opaque). Set the element's filter to opacity(0%). The element is now invisible (because it is transparent), but it is still in the accessibility tree and the registered click event is valid.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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>

Fourth: Zoom

transform: scale(0, 0)

Setting transform to scale(0, 0) will scale the element to 0 pixels on both the x-axis and the y-axis. The element will be displayed and will occupy a position, but because it has been scaled to 0%, the pixel ratio occupied by the element and its content is 0*0, so the element and its content cannot be seen and cannot be clicked.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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

Setting both width and height to 0 makes the element occupy a pixel ratio of 0*0, but two situations will occur at this time:
When the display property of an element is inline, the element content will expand the width and height of the element;
When the display attribute of an element is block or inline-block, the width and height of the element are 0, but the element content is still displayed normally. At this time, adding overflow:hidden; can crop the element content outside the element.

The difference between this method and transform: scale(0,0) is that transform: scale(0,0) scales both the element and its content, while this method scales the element to 0px and then crops the content outside the element.

Code:

<!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;/* border-width: 2px in user agent stylesheet; */
                padding: 0;/* user agent stylesheet padding: 1px 6px; */
            }
        </style>
    </head>
    <body>
        <div>
            <button id="normal">Button</button>
        </div>
        <div>
            <button id="bt">Button</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>

Fifth: Rotation

transform: rotateX(90deg)

Rotate the element 90 degrees clockwise along the X axis to hide the element.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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)

Rotate the element 90 degrees clockwise along the Y axis to hide the element.

Code:

<!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</button>
        </div>
        <div>
            <button id="bt">Button</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>

The sixth type: off-screen display position

The element can also be made invisible by moving it off-screen, but there are too many CSS styles to achieve this effect. Here we will only give an example.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>Off-screen display position</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</button>
        </div>
        <div>
            <button id="bt">Button</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>

Seventh: Cover

You can also make elements invisible by using element masking. Since there are many CSS styles to achieve this effect, we will only give an example here.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>Cover</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</button>
        </div>
        <div style="position: relative;line-height: normal;">
            <button id="bt">Button</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>

refer to

[1] display | MDN
[2] visibility | MDN
[3] opacity | MDN
[4] transform | MDN
[5] overflow | MDN
[6] color | MDN
[7] transform | MDN
[8] z-index | MDN
[9] CSS3 color value RGBA representation
[10] A perhaps silly question, what exactly is alpha in image processing?

This concludes this article about 7 interesting ways to implement hidden elements in CSS. For more relevant CSS hidden elements content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: MySQL index failure principle

>>: Solve nginx "504 Gateway Time-out" error