Js自定义属性

最新推荐文章于 2022-02-13 19:11:14 发布

原创最新推荐文章于 2022-02-13 19:11:14 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Js #自定义属性 #Js自定义属性

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

HTML标签的自定义属性

1、(隐式的方法) document.getElementById("testId").ggg = "new";

2、(显式的方法)document.getElementById("testId").setAttribute("ggg", "new");
在前台会展示该属性，用jquery也可以获取到值

可以利用索引值建立与数组元素的匹配关系,从而实现某些效果

<script>
/*
	HTML 标签属性、
	自定义属性
*/
window.onload = function (){
	var aBtn = document.getElementsByTagName('input');
	
	// aBtn[0].abc = 123;			// 自定义属性
	
	// alert( aBtn[0].abc );
	// aBtn[0].abc = 456;
	
	// JS 可以为任何HTML元素添加任意个 自定义属性
	
	for( var i=0; i<aBtn.length; i++ ){
		aBtn[i].abc = 123;
		aBtn[i].xyz = true;
	}
	
};
</script>
<body>


<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />


</body>

<script>
window.onload = function (){
 var aBtn = document.getElementsByTagName('input');
 var aP = document.getElementsByTagName('p');
 
 // 想建立“匹配”“对应”关系，可以用索引值
 var arr = [ '张三', '李四', '王二' ];
 
 for( var i=0; i<aBtn.length; i++ ){
 
  aBtn[i].index = i;	 // 自定义属性（索引值）
 
  aBtn[i].onclick = function (){
   // alert( arr[ this.index ] );
   this.value = arr[ this.index ];
   
   aP[ this.index ].innerHTML = arr[ this.index ];
  };
 }
};
</script>

<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>
</body>