Home >Web Front-end >CSS Tutorial >How to hide css styles
How to hide css styles
- 王林Original
- 2021-06-22 14:01:574733browse
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:
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!