1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 .top-banner {
12 background-color: pink;
13 height: 80px;
14 }
15 .w {
16 width: 1210px;
17 margin: 10px auto;
18 position: relative;
19 }
20 img {
21 width: 1210px;
22 height: 80px;
23 background-color: blue;
24 }
25 a {
26 position: absolute;
27 top: 5px;
28 right: 5px;
29 color: #fff;
30 background-color: #000;
31 text-decoration: none;
32 width: 20px;
33 height: 20px;
34 font: 700 14px/20px "simsum";
35 text-align: center;
36 }
37 .hide {
38 display: none!important;
39 }
40 </style>
41 <!--<script>-->
42 <!--window.onload = function () {-->
43 <!-- -->
44 <!--}-->
45 <!--</script>-->
46 </head>
47 <body>
48 <div class="top-banner" id="topBanner">
49 <div class="w">
50 <img src="" alt=""/>
51 <a href="#" id="closeBanner">×</a>
52 </div>
53 </div>
54
55
56 <script>
57 //需求：点击案例，隐藏盒子。
58 //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
59 //步骤：
60 //1.获取事件源和相关元素
61 //2.绑定事件
62 //3.书写事件驱动程序
63
64
65 //1.获取事件源和相关元素
66 var closeBanner = document.getElementById("closeBanner");
67 var topBanner = document.getElementById("topBanner");
68 //2.绑定事件
69 closeBanner.onclick = function () {
70 //3.书写事件驱动程序
71 // console.log(1);
72 //类控制
73 // topBanner.className += " hide"; //保留原类名，添加新类名
74 topBanner.className = "hide";//替换旧类名
75 // topBanner.style.display = "none";
76 }
77
78 </script>
79 </body>
80 </html>
