JavaScript学习笔记——自定义属性

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;
	}
}