首页 > 网站 > WEB开发 > 正文

添加自定义属性值及应用

2024-04-27 14:23:34
字体:
来源:转载
供稿:网友

添加自定义属性值及应用

添加自定义属性值:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8     var aBtn = document.getElementsByTagName('input'); 9     10     for( var i=0; i<aBtn.length; i++ ){11         12         aBtn[i].index = i;            // 自定义属性(索引值)13         //aBtn[0].index = 0;            // for第一遍循环时:i=0; 相当于给第一个input自定义一个属性 index=0;14         //aBtn[1].index = 1;            // for第二遍循环时:i=1; 相当于给第二个input自定义一个属性 index=1;15         //aBtn[2].index = 2;            // for第三遍循环时:i=2; 相当于给第三个input自定义一个属性 index=2;16         17         //此时,i已经循环了3遍 i=3;18         aBtn[i].onclick = function (){19             20             // alert( i );            // 321             alert( this.index );22         23         };24     }25 };26 </script>27 </head>28 29 <body>30 31 <input index=0 type="button" value="btn1" />32 <input index=1 type="button" value="btn2" />33 <input index=2 type="button" value="btn3" />34 35 </body>36 </html>

添加自定义属性值实例讲解:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8     var aBtn = document.getElementsByTagName('input'); 9     var aP = document.getElementsByTagName('p');10     11     // 想建立“匹配”“对应”关系,就用索引值12     var arr = [ 'HTML', 'javaSCRIPT', 'CSS' ];13     14     for( var i=0; i<aBtn.length; i++ ){15         16         aBtn[i].index = i;            // 自定义属性(索引值)17         18         aBtn[i].onclick = function (){19             // alert( arr[ this.index ] );20             this.value = arr[ this.index ];21             22             aP[ this.index ].innerHTML = arr[ this.index ];23         };24     }25 };26 </script>27 </head>28 29 <body>30 31 <input type="button" value="btn1" />32 <input type="button" value="btn2" />33 <input type="button" value="btn3" />34 <p>a</p>35 <p>b</p>36 <p>c</p>37 38 </body>39 </html>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表