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