9.顯示和隱藏盒子

時間 2019-11-21

標籤顯示隱藏盒子欄目 CSS 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         button {
 8             margin: 10px;
 9         }
10         div {
11             width: 200px;
12             height: 200px;
13             background-color: pink;
14         }
15         .show {
16             display: block;
17         }
18         .hide {
19             display: none;
20         }
21     </style>
22 
23 </head>
24 <body>
25     <button id="btn">隱藏</button>
26     <div>
27         臨千仞之溪，非才長也，位高也！
28     </div>
29 
30     <script>
31         //需求：點擊button,隱藏盒子。改變文字，在點擊按鈕，顯示出來。
32         //步驟：
33         //1.獲取事件源和相關元素
34         //2.綁定事件
35         //3.書寫事件驅動程序
36 
37         //1.獲取事件源和相關元素
38         var btn = document.getElementById("btn");
39         var div = document.getElementsByTagName("div")[0];
40         //2.綁定事件
41         btn.onclick = function () {
42             //3.書寫事件驅動程序
43             //判斷btn的innerHTML屬性值，若是爲隱藏就隱藏盒子，並修改按鈕內容爲顯示。
44             //反之，則顯示，並修改按鈕內容爲隱藏
45             if(this.innerHTML === "隱藏"){
46                 div.className = "hide";
47                 //修改文字（innerHTML）
48                 btn.innerHTML = "顯示";
49             }else{
50                 div.className = "show";
51                 //修改文字（innerHTML）
52                 btn.innerHTML = "隱藏";
53             }
54         }
55 
56     </script>
57 
58 </body>
59 </html>

相關標籤/搜索

每日一句

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