Home > Article > Web Front-end > How to hide css styles

How to hide css styles

王林Original: 2021-06-22 14:01:574712browse

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.

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>

The running screenshot is as follows:

How to hide css styles

Related video tutorials Share: css video tutorial

The above is the detailed content of How to hide css styles. For more information, please follow other related articles on the PHP Chinese website!

css display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set hyperlink style with cssNext article：How to set hyperlink style with css

See more

How to hide css styles

Related articles