1 獲取標簽屬性

語法: element.getAttribute(‘屬性名‘) 返回對應屬性的值 ,如果沒有返回null.

//html
<div id="box" index="0"></div>

//js
var box = document.getElementById(‘box‘);
var value = box.getAttribute(‘index‘);
console.log(value) // 0

2 設置自定義屬性的值
語法: element.setAttribute(‘屬性名‘, ‘屬性的值‘) 返回undefined

//html
<div id="box" ></div>

//
 
js
var box = document.getElementById(‘box‘);
box.setAttribute(‘index‘, 0); 

//js代碼執行完畢之後.html的標簽的變化
<div id="box" index="0"></div>

3 移除自定義屬性的值

語法: element.removeAttribute(‘屬性名‘) 返回undefined

//html
<div id="box" index="0"></div>

//js
var box = document.getElementById(‘box‘);
box.removeAttribute(
 
‘index‘); 

//js代碼執行完畢之後 html的標簽的變化
<div id="box" ></div>

註:

1 操作自定義屬性的這三個方法,不僅可以操作自定義屬性,同時也可以操作html規範中的屬性

2 設置的屬性的值,最終都轉換成了字符串的形式

javascript教程系列42:標簽上自定義屬性的操作