How to hide css styles-CSS Tutorial-php.cn

How to hide css styles

王林

Release： 2021-06-22 14:01:57

Original

4716 people have browsed it

The way to hide the CSS style is to set the [display:none;] attribute to the element, so that the element will be hidden and no longer occupy its original position. If you want to redisplay the element, you can set the [displayL:block;] attribute.

How to hide css styles

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

If we want to hide the style in css, then we can use the display attribute. One of the attribute values of this attribute is none.

After a style sets the display:none attribute, the element will be hidden and will no longer occupy its original position. If we want to redisplay the element, we only need to set display:block;, so that the element will be redisplayed.

Let’s do a simple code test. There are two buttons. Click the open button, and the display attribute of the div tag is changed to block, which is displayed. Click the off button, and the display attribute of the div tag is changed to none. , hide it.

Specific code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: rgba(0, 0, 0, 0.8);
        }
        .b1{
            width: 150px;
            height: 30px;
            margin-top: 100px ;
            margin-left: 500px;
        }
        .b2{
            width: 150px;
            height: 30px;
            margin-top: 100px ;
            margin-left: 100px;
        }
        div{
            /* 隐藏元素 */
            display: none;
            width: 300px;
            height: 300px;
            background-color: yellow;
            border-radius: 50%;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <button> 开</button>
    <button>关</button>
    <div></div>

    <script>
        var btn01 = document.querySelector(".b1");
        var btn02  =document.querySelector(".b2")
        var div01 = document.querySelector("div")

        btn01.addEventListener("click",function(){
            div01.style.display  = "block";
        })
        btn02.addEventListener("click",function(){
            div01.style.display  = "none";
        })
    </script>
</body>
</html>

Copy after login

The running screenshot is as follows:

How to hide css styles