HTML标签属性是标签自带的属性,而自定义属性是标签本身没有的属性,比如abc属性,我们可以自定义这样一个属性。
JS可以为任何HTML元素添加任意个自定义属性。自定义属性可以改,可以读。
自定义属性除了可以是数字、布尔值等多种数据类型。
var aBtn=document.getElementsByTagName('input');
//JS可以为任何HTML元素添加任意个自定义属性
for(var i=0;i<aBtn.length;i++){
aBtn[i].abc=123;
aBtn[i].make=true;
}
实例1:自定义属性应用
var aLi=document.getElementsByTagName('li');
var onOff=[true,true,true];
for(var i=0;i<aLi.length;i++){
//给每个li添加一个属性来作为开关
aLi[i].onOff=true;
aLi[i].onclick=function(){
if(this.onOff){//判断当前开关是真还是假 不能用背景、颜色、相对路径进行判断,
this.onOff=false;
this.style.background='url(2.jpg) no-repeat center';
}
else{
this.onOff=true;
this.style.background='url(1.jpg) no-repeat center';
}
实例2:自定义属性自身递增数字
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
aBtn[i].num=0;
aBtn[i].onclick=function(){
this.num+=1;
this.value=this.num;//将按钮的value设置为num
};
}
实例3:自定义属性添加索引值
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i); //发现此时的i始终为3.
}
}
在这种情况下,我们发现无论点击哪个按钮,这里的提示内容i始终为3,而不是像我们期望的那样分别是1,2,3.如果我们要得到这样的效果,可以给按钮添加自定义属性,标识出按钮排行第几位,相当于添加了下标。
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给按钮添加索引 自定义的属性,同时标识出按钮排行第几位,相当于下标
aBtn[i].onclick=function(){
//alert(i); //发现此时的i始终为3.
alert(this.a); //此时索引是跟随按钮而变的。
}
实例4:自定义属性添加索引值匹配HTML元素
var aBtn=document.getElementsByTagName('input');
var aP=document.getElementsByTagName('p');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给按钮添加索引 自定义的属性,同时标识出按钮排行第几位,相当于下标
aP[i].index=i;
aBtn[i].onclick=function(){
//alert(i); //发现此时的i始终为3.
//alert(this.index); //此时索引是跟随按钮而变的。
aP[this.index].innerHTML=this.value;
}
}