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