3.關閉京東廣告欄

時間 2019-11-21

標籤關閉京東廣告欄简体版

原文原文鏈接

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。