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循环里面尤其的常见。