HTML5 增加了一項新功能是 自定義數據屬性 ，也就是 data-* 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設置我們需要的自定義屬性，來進行一些數據的存放。當然高級瀏覽器下可通過腳本進行定義和數據存取。在項目實踐中非常有用。
<input type="button" value="按鈕" data-index="10" data-index-color="red" >
在開始之前我們先來看下之前我是如何獲取自定義屬性的。
<script> var oBtn=document.querySelector('input'); console.log(oBtn.value); //按鈕 console.log(oBtn.index); //undefined console.log(oBtn.dataIndex); //undefined </script>
為什么后面2個出現的 undefined 其實也不足為奇，因為點后面跟的只允許時符合 W3C 規范，不符合的屬性全被瀏覽器干掉了。但就是想獲取自定義屬性還是有辦法的，代碼如下：
<script> var oBtn=document.querySelector('input'); console.log(oBtn.getAttribute('value')); //按鈕 console.log(oBtn.getAttribute('index')); //10 console.log(oBtn.getAttribute('data-index')); //10 </script>
當然更改與刪除分別是 ele.setAttribute(name,value) 與 ele.removeAttribute(name) ,此方法能在所有的現代瀏覽器中正常工作，但它不是HTML 5 的自定義 data-*屬性被使用目的，不然和我們以前使用的自定義屬性就沒有什么區別了,我在此也就不多說了。
現在HTML5新增了個dataset 屬性來存取 data-* 自定義屬性的值。這個 dataset 屬性是HTML5 JavaScript API的一部分，用來返回一個所有選擇元素 data- 屬性的DOMStringMap對象。使用這種方法時，不是使用完整的屬性名，如 data-index 來存取數據，應該去掉data- 前綴。
還有一點特別注意的是： data- 屬性名如果包含了連字符，例如：data-index-color ，連字符將被去掉，並轉換為駝峰式的命名，前面的屬性名轉換后應該是：indexColor 。 代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>dataset</title> </head> <body> <input type="button" value="按鈕" index="10" data-index="10" data-index-color="red"> <script> var oBtn=document.querySelector('input'); console.log(oBtn.dataset); //DOMStringMap對象 console.log(oBtn.dataset.index); //10 console.log(oBtn.dataset.indexColor); //red console.log(oBtn.index); //undefined console.log('name' in oBtn.dataset); //false oBtn.dataset.name='zpf'; console.log('name' in oBtn.dataset); //true oBtn.dataset.index=100; console.log(oBtn.dataset.index); //100 oBtn.index=20; console.log(oBtn.index); //20 </script> </body> </html>
順便我們在看下以上代碼的控制台輸出 圖如下：
就上面看到的input里的index屬性，我們直接用oBtn.index,這是undefined,我們用JS給他設置了oBtn.index=20,但他的頁面中的標簽里面的index還是等於10,如果我們想JS的設置獲取出來的與HTML結構的表現相符只能通過setAttribute和getAttribute。
在來看看現在data-這個方法。設置、獲取、更改三者修改的與HTML標簽內部屬性依依對應，而且操作起來比之前方便，所以說以后我們想保存某些屬性在前面加個data-，這樣的話這些屬性值都會統一放在一個對象中進行管理與遍歷。
<script> for(var name in oBtn.dataset){ console.log(oBtn.dataset[name]); } </script>
如果你想刪掉一個 data-屬性 ，可以這么做： delete el.dataset.id ; 或者 el.dataset.id = null ; 。