JS 自定义属性

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7         
 8     </head>
 9     <body>
10     <input type="button" name="" class="btn" value="测试1" />
11     <input type="button" name="" class="btn" value="测试2" />
12     <input type="button" name="" class="btn" value="测试3" />
13     
14     </body>
15     
16     <script type="text/javascript">
17         // 自定义属性
18         var button = document.getElementById("btn");
19         // 创造属性，不能乱用
20         button.guoxiaomin = "1";
21         console.log(button.guoxiaomin);
22 
23         var btns = document.getElementsByClassName("btn");
24         var corlors = ["red","green","yellow"];
25     for (var i = 0;i < 3; i++) {
26         // 利用自定义属性记录i 的值
27         btns[i].index = i;
28         console.log(btns[i].index);        
29         btns[i].onclick = function(){
30             if(this.index == 0){
31                 document.body.style.background = "red";
32             }else if(this.index == 1){
33                 document.body.style.background = "green";
34             }else{
35                 document.body.style.background = "yellow";
36             }
37         document.body.style.background = corlors[this.index];
38             
39         }
40     }
41 
42 
43     for (var i = 0;i < 3; i++) {
44         
45         }console.log(i);
46         //先赋值：i = 0 ；再判断i < 3 ？; 如果为true侧执行 console.log(i);最后i++;
47 
48 
49     </script>
50     
51     
52 </html>