9.显示和隐藏盒子

最新推荐文章于 2022-09-21 15:08:35 发布

a18740351964

最新推荐文章于 2022-09-21 15:08:35 发布

阅读量400

点赞数

原文链接：http://www.cnblogs.com/BingBing-Deng/p/10427115.html

版权

 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>

转载于:https://www.cnblogs.com/BingBing-Deng/p/10427115.html

a18740351964

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9.显示和隐藏盒子

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 button { 8 ...
复制链接

扫一扫