js的自定义属性

js的自定义属性

自定义属性：是给元素上定义本来不存在的属性

自定义属性最常见的是索引值。因为for循环结束时i已经变成最后一个数字，再次使用i就会出现错误，因此必须用到自定义属性，否则i显示的永远是循环结束后的数字。元素[i].index = i。如数组里的数据和按钮利用索引值一一对应。

练习1：在点击按钮（3个）时用索引值把arr（3个）里的数据输入到p（3个）标签里。

<input type="button" value="第一个"/>
<input type="button" value="第二个"/>
<input type="button" value="第三个"/>
<p></p>
<p></p>
<p></p>

var arr=["p1的数据","p2的数据","p3的数据"];
var aBtn=document.getElementsByTagName("input");
var aP=document.getElementsByTagName("p");
for(var i=0;i<aBtn.length;i++){
	aBtn[i].index=i;
	aBtn[i].οnclick=function(){
		aP[this.index].innerHTML=arr[this.index];
		}
}

练习2：点击哪个li时哪个li的背景颜色就变红

var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
   for(var i = 0;i < aLi.length;i++){
	    aLi[i].index = i;
	    aLi[i].onclick = function(){
		aLi[this.index].style.background = 'red';
	}
}//点击第二个li

以上都是用到了js的自定义属性中的索引值，索引值在for循环里面尤其的常见。