JS自定义属性（1）

JS 可以为任何HTML元素添加任意个 自定义属性

例：for( var i=0; i<aBtn.length; i++ ){
　　　　aBtn[i].abc = 123;
　　　　aBtn[i].xyz = true;
　　}

 

放三张图片，当鼠标点击图片的时候就会变颜色，

当鼠标再次点击的时候就会恢复原来的样子

 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
 8 </style>
 9 <script>
10 window.onload = function (){
11     var aLi = document.getElementsByTagName('li');
12     // var onOff = true;    // 只能控制一组！
13     
14     for( var i=0; i<aLi.length; i++ ){
15         
16         aLi[i].onOff = true;
17         
18         aLi[i].onclick = function (){
19             
20             // alert( this.style.background );
21             // 背景不能判断
22             // color red #f00 
23             // 相对路径
24             
25             if ( this.onOff ) {
26                 this.style.background = 'url(img/active.png)';
27                 this.onOff = false;
28             } else {
29                 this.style.background = 'url(img/normal.png)';
30                 this.onOff = true;
31             }
32         };
33     }
34 };
35 </script>
36 </head>
37 
38 <body>
39 
40 <ul>
41     <li></li>
42     <li></li>
43     <li></li>
44 </ul>
45 
46 </body>
47 </html>
示例代码

 

posted @ 2017-06-01 16:55  #安生  阅读(111)  评论(0)  编辑  收藏  举报