CSS元素的显示和隐藏

2021-03-19 01:26

阅读：418

标签：block html img content alt class char cal display

CSS元素的显示和隐藏

1.display

display : none; //隐藏元素，隐藏元素后，不再占据原先的位置

display: block; //显示隐藏的元素

做一个简单的代码测试，有两个按钮，点击开的按钮，div标签的dispaly属性改为 block，显示出来，点击关的按钮，div标签的dispaly属性改为 none，隐藏出来

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     title>Documenttitle>
 7     style>
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         body{
13             background-color: rgba(0, 0, 0, 0.8);
14         }
15         .b1{
16             width: 150px;
17             height: 30px;
18             margin-top: 100px ;
19             margin-left: 500px;
20         }
21         .b2{
22             width: 150px;
23             height: 30px;
24             margin-top: 100px ;
25             margin-left: 100px;
26         }
27         div{
28             /* 隐藏元素 */
29             display: none;
30             width: 300px;
31             height: 300px;
32             background-color: yellow;
33             border-radius: 50%;
34             margin: 50px auto;
35         }
36     style>
37 head>
38 body>
39     button class="b1"> 开button>
40     button class="b2">关button>
41     div>div>
42 
43     script>
44         var btn01 = document.querySelector(".b1");
45         var btn02  =document.querySelector(".b2")
46         var div01 = document.querySelector("div")
47 
48         btn01.addEventListener("click",function(){
49             div01.style.display  = "block";
50         })
51         btn02.addEventListener("click",function(){
52             div01.style.display  = "none";
53         })
54     script>
55 body>
56 html>