JS自定义属性的运用

Posted 前端小小小小小小小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS自定义属性的运用相关的知识,希望对你有一定的参考价值。

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





以上是关于JS自定义属性的运用的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

VS code自定义用户代码片段snippet

VS Code中自定义Emmet代码片段

为动态创建的 Android 片段提供自定义属性值