在上一篇DOM的基础上,继续案例的实践。
一:案例
1.禁用文本框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="禁用文本框" id="btn1"> 9 <input type="text" value="文本框" id="text"> 10 <script> 11 var btn1=document.getElementById("btn1"); 12 btn1.onclick=function () { 13 document.getElementById("text").disabled=true; 14 } 15 </script> 16 </body> 17 </html>
效果:
2.点击超链接,在下面出现一个大图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="image/00_1.png" id="ak"> 9 <img src="image/00_2.jpg" alt=""> 10 </a><br> 11 <img src="" alt="" id="big"> 12 <script> 13 document.getElementById("ak").onclick=function () { 14 document.getElementById("big").src=document.getElementById("ak").href; 15 return false; 16 } 17 </script> 18 </body> 19 </html>
效果:
3.相册
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 img { 8 width: 150px; 9 height: 100%; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="image/00_3.jpg" title="A"> 15 <img src="image/00_3.jpg" alt="111" title="A"> 16 </a> 17 <a href="image/00_5.jpg" title="B"> 18 <img src="image/00_5.jpg" alt="" title="B"> 19 </a> 20 <a href="image/00_6.jpg" title="C"> 21 <img src="image/00_6.jpg" alt="" title="C"> 22 </a> 23 <a href="image/00_7.jpg" title="D"> 24 <img src="image/00_7.jpg" alt="" title="D"> 25 </a> 26 27 <br> 28 <img src="" alt="" id="image" style="width: 600px;"> 29 <p id="des">选择一个图片</p> 30 31 32 <script> 33 var a = document.getElementsByTagName("a"); 34 for (var i=0;i<a.length;i++){ 35 a[i].onclick=function () { 36 document.getElementById("image").src=this.href; 37 document.getElementById("des").innerText=this.title; 38 return false; 39 } 40 } 41 </script> 42 </body> 43 </html>
效果:
4.隔行变色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li { 8 list-style: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" value="隔行变色" id="btn"> 14 <ul id="ul"> 15 <li>色白板擦</li> 16 <li>无色的农维年费</li> 17 <li>列为可能粉扑舞IE牛排</li> 18 <li>明晚地玻尿酸单车呢</li> 19 <li>依然未必</li> 20 <li>美津浓你后悔</li> 21 <li>不能说地方居委会吃</li> 22 <li><问客服部农委非农></问客服部农委非农></li> 23 </ul> 24 <script> 25 document.getElementById("btn").onclick=function () { 26 var li = document.getElementById("ul").getElementsByTagName("li"); 27 for (var i=0;i<li.length;i++){ 28 if (i%2==0){ 29 li[i].style.backgroundColor="#ccc"; 30 } else{ 31 li[i].style.backgroundColor="#aaa"; 32 } 33 } 34 } 35 36 37 </script> 38 </body> 39 </html>
效果: