你的位置:首页 > Java教程

[Java教程]javascript自定义属性的应用


你知道吗?JavaScript可以为任何HTML元素添加任意的自定义属性,而且你可能无意中已经使用过自定义属性了,那么自定义属性通常有哪些应用呢?

1、想用“匹配”、对应关系的时候就用索引值

2、同时控制多组元素

3、开关切换,多组元素开关的切换

就总结到这里,下面来看看几个例子吧

JavaScript自定义属性索引值:

HTML:

<input type="button" value="btn1"><input type="button" value="btn2"><input type="button" value="btn3">

JavaScript:

var aInp=document.getElementsByTagName('input');  for (var i = 0; i < aInp.length; i++) {    aInp[i].index=i;//自定义属性,就是通常用的索引值    aInp[i].onclick=function(){      alert(this.index);//弹出当前点击的是第几个按钮,从0开始    }  };

同时控制多组元素:

HTML:

<input type="button" value="0"><input type="button" value="0"><input type="button" value="0">

JavaScript:

var aInp=document.getElementsByTagName('input');  var arr=['A','B','C','D','E','F','G'];  for (var i = 0; i < aInp.length; i++) {    aInp[i].num=0;//自定义属性    aInp[i].onclick=function(){      this.value=arr[this.num];      this.num++;      if (this.num===arr.length) {        this.num=0;      };    }  };

自定义属性组开关:

CSS:

.cont{    width: 400px;    margin: 30px auto;    position: relative;  }  .cont input{    height: 100px;    width: 100px;    background: #ddd;    margin-left: 20px;    font-size: 30px;    border:1px solid #ccc;  }  .cont .active{    background: #ffc7d2;    color: #fff;    border:1px solid #fc6d88;  }

HTML:

<div class="cont">  <input type="button" value="btn1">  <input type="button" value="btn2">  <input type="button" value="btn3"></div>

JavaScript:

var aInp=document.getElementsByTagName('input');  for (var i = 0; i < aInp.length; i++) {    aInp[i].Onoff=true;//自定义属性,切换开关    aInp[i].onclick=function(){      if (this.Onoff) {        this.className='active';        this.Onoff=false;      }      else{        this.className='';        this.Onoff=true;      };    }  };