<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js_0321作業</title> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> </style> </head> <body> <img id="myImg" src="img/ft-top.jpg"/> <input type="button" name="" id="btn1" value="第一題a" /> <input type="button" name="" id="btn2" value="第二題b" /> <input type="button" name="" id="btn3" value="第三題c" /> <input type="button" name="" id="btn4" value="第四題d" /> <input type="button" name="" id="btn5" value="第五題e" /> <input type="button" name="" id="btn6" value="第六題f" /> <input type="button" name="" id="btn7" value="第六題g" /> </body> </html>
1 window.onload=function(){ 2 //獲取myImg元素的標簽名 3 var b1=document.getElementById("btn1"); 4 var myImg=document.getElementById("myImg"); 5 if(myImg.nodeType==1){ 6 b1.onclick=function(){ 7 alert(myImg.tagName); 8 } 9 } 10 //獲取myImg元素的id值和src的值，並打印輸出，並修改src值 11 var b2=document.getElementById("btn2"); 12 b2.onclick=function(){ 13 alert(myImg.id); 14 alert(myImg.src); 15 alert(myImg.src="img/jddog.gif"); 16 } 17 //給myImg元素添加title屬性，值為“這是一個圖片” 18 var b3=document.getElementById("btn3"); 19 b3.onclick=function(){ 20 alert(myImg.title="這是一個圖片"); 21 } 22 //給myImg元素添加“data-id屬性”，值為“img001”。 23 var b4=document.getElementById("btn4"); 24 b4.onclick=function(){ 25 myImg.setAttribute("data-id","myImg001"); 26 } 27 28 //修改“data-id屬性”，修改值為“image001”（方法：有則修改，無則指定） 29 var b5=document.getElementById("btn5"); 30 b5.onclick=function(){ 31 myImg.setAttribute("data-id","myimage001"); 32 } 33 34 var b6=document.getElementById("btn6"); 35 b6.onclick=function(){ 36 var attrs=myImg.attributes; 37 for(i=0;i<attrs.length;i++){ 38 alert(attrs[i].nodeName); 39 alert(attrs[i].nodeValue); 40 } 41 } 42 //刪除“data-id” 43 var b7=document.getElementById("btn7"); 44 b7.onclick=function(){ 45 myImg.removeAttribute("data-id") 46 } 47 }