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 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>