1.获取元素属性
获得元素的固有属性
element.属性
获得元素的自定义属性
element.getAttribute('属性')
2.设置元素属性值
设置固有属性
element.属性='值'
设置自定义属性或固有属性
element.setAttriute('属性','值')
移除属性
element.removeAttribute('属性')
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
//1.获取元素属性
console.log(div.id);
console.log(div.getAttribute('index'))
//2.设置元素属性
console.log(div.id = 'id1');
div.setAttribute('id', 2);
console.log(div.id);
//3.移除属性
div.removeAttribute('index');
console.log(div.index)
</script>
</body>
3.H5自定义属性
H5规定自定义属性以data-开头作为属性名并赋值
<div data-index="1"></div>
或者使用JS设置
element.setAttribute('data-index',2)
获取H5自定义属性
兼容性获取
element.getAttribute('data-index')
H5新增
element.dataset.index
element.dataset['index']
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
//h5新增的获取自定义属性的方法
//dataset是一个集合,里面存放了所有以打data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
//自定义属性出现很长的‘-’接词,用驼峰命名法
console.log(div.dataset.listName);
</script>
</body>