自定义属性、索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
float: left;
background: url(1.png) no-repeat;
width: 152px;
height: 72px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<p></p>
<p></p>
<p></p>
<script>
//自定义属性开关
var ali = document.getElementsByTagName("li");
for(var i=0; i<ali.length; i++){
ali[i].onoff = true;
ali[i].onclick = function(){
if(this.onoff){
this.style.background = "url(2.png) no-repeat";
this.onoff = false;
}else{
this.style.background = "url(1.png) no-repeat";
this.onoff = true;
}
}
}
//添加索引值、匹配数组
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(){
this.value = arr[this.index];
ap[this.index].innerHTML = arr[this.index];
};
}
</script>
</body>
</html>