页面中经常需要建立匹配、对应关系来改变页面的显示元素；这个时候可能就需要用到自定义属性来添加索引值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自定义属性匹配索引值</title> </head> <body> <input type="button" value="btn1" /> <input type="button" value="btn2" /> <input type="button" value="btn3" /> <p>a</p> <p>b</p> <p>c</p> <script type="text/javascript"> var aBtn = document.getElementsByTagName('input'); var arr = ['美队', '钢铁侠', '绿巨人']; var aP = document.getElementsByTagName('p'); // 要想建立“匹配”、“对应”关系，就用索引值； for(var i=0; i<aBtn.length; i++){ aBtn[i].index = i; // 自定义属性 （索引值）； aBtn[i].onclick = function(){ // this.value = arr[this.index]; //点击按钮，匹配了相应的名字 aP[this.index].innerHTML = arr [this.index]; //匹配了相应的P元素 } } </script> </body> </html>
思路：
点击按钮，让下面的对应的P内容改变，
改变为什么呢？改变为对应数组的内容；比如：第一个按钮点击后改变第一p元素的内容，这个内容来自于数组的第一个元素；
这里的自定义值就相当于一个桥梁 联系了按钮、数组、p标签