005 DOM02

　　在上一篇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>

　　效果：

猜你喜欢