方法一:
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。