自定义属性值操作

方法一:

1 得到元素属性值:

自带属性:console.log（div.id）;

自定义属性:console.log（div.getAttribute（'自定义属性名'））

2设置自定义属性值:

div.setAttribute（'index',2）;（也能修改自带属性）

3 移除属性值:

div.removeAttribute（'index'）;

例一：tab栏切换制作，分为上下两个部分

<script>
        var tab_list=document.querySelector('.tab_list');
        var lis=tab_list.querySelectorAll('li');  
        var items=document.querySelectorAll('.item');      
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',x);//用到本节内容
            lis[i].onclick=function(){
                //上面的选项卡模块
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                this.className='current';//点击li后变红
                //下面的显示模块
                var index=this.getAttribute('index');
                for(var i=0;i<lis.length;i++){
                    items[i].style.display='none';
                }
                items[index].style.display='block';
            }
        }
    </script>

H5规定自定义属性由data-开头

方法二:

得到自定义属性值:（只有ie11能用，上一种方法更常用）

div.dataset打印所有自定义属性

div.dataset.index打印index有关自定义属性

如果自定义属性里有多个-链接的单词，用驼峰命名法，如div.dataset.listName。