自定义数据属性

//设置自定义属性
/*
    第一种方式：元素对象.属性名=属性值，（原理：
    向对象对应的堆内存中添加了一个属性
    ）
*/
var btnlist = document.querySelectorAll("button");
for(var i=0; i<btnlist.length; i++){
    btnlistp[i].myindex = i;
    btnlist[i].onclick = function(){
        console.log(this.myindex);
    }
}
/*
    第二种方式：基于H5的新语法，为元素添加属性，以data-开，可以通过dataset对象进行访问
    ，将属性信息添加到结构上而非堆内存中，作为提示信息或者元素语义。
*/
var btnlist = document.querySelectorAll("button");
for(var i=0; i<btnlist.length; i++){
    btnlist[i].setAttribute('data-index',i);
    btnlist[i].onclick = function(){
        //1.
        console.log(this.dataset.index);
        //2.
        console.log(this.getAttribute('data-index'));
    }
}

 

转载于:https://www.cnblogs.com/angle-xiu/p/11335023.html