JavaWeb10.1【JS：DOM入門、事件繫結入門、案例】
阿新 • • 發佈：2021-06-27
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 //通過id獲取元素物件 9 // var light = document.getElementById("light"); 10 // alert(light); //null js在此處獲取不到下面還未執行的內容，所以要將js定義在所需內容的下面，推薦放在body最下方11 </script> 12 </head> 13 <body> 14 <img id="light" src="../img/off.gif"> 15 <h1 id="title">悔創阿里傑克馬</h1> 16 17 <script> 18 //通過id獲取元素物件 19 var light = document.getElementById("light"); 20 // alert(light); 21 alert("我要換圖片了。。。"); 22 light.src= "../img/on.gif"; 23 24 //1.獲取h1標籤物件 25 var title = document.getElementById("title"); 26 alert("我要換內容了。。。"); 27 //2.修改內容 28 title.innerHTML = "不識妻美劉強東"; 29 </script> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 function fun() { 9 alert("我被點了"); 10 } 11 </script> 12 </head> 13 <body> 14 <!--<img id="light" src="../img/off.gif" onclick="alert('我被點了')">--> 15 <img id="light" src="../img/off.gif" onclick="fun()"> <!--方式1--> 16 <img id="light2" src="../img/off.gif" > 17 18 <script> 19 function fun2() { 20 alert("咋老點我"); 21 } 22 /*方式2*/ 23 //1 獲取light2物件 24 var light2 = document.getElementById("light2"); 25 //2 繫結事件 26 light2.onclick = fun2; 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <img src="../img/off.gif" id="light"> 9 10 /* 11 分析： 12 1.獲取圖片物件 13 2.繫結單擊事件 14 3.每次點選切換圖片 15 * 規則： 16 * 如果燈是開的 on,切換圖片為 off 17 * 如果燈是關的 off,切換圖片為 on 18 * 使用標記flag來完成 19 20 */ 21 22 <script> 23 var light = document.getElementById("light"); 24 var flag = false; //代表燈滅狀態off 25 light.onclick = function(){ //匿名方法 26 if (flag){ 27 light.src = "../img/on.gif"; 28 flag = false; 29 } else { 30 light.src = "../img/off.gif"; 31 flag = true; 32 } 33 } 34 </script> 35 </body> 36 </html>