JS自定义属性的运用

Posted 2020-10-09 前端小小小小小小小白

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