站長資訊網
html5自定義屬性“data-*”用于存儲私有頁面后應用的自定義數據，而自定義的數據可以讓頁面擁有更好的交互體驗（不需要使用Ajax或去服務端查詢數據），語法“<element data-*="指定屬性值（一個字符串）">”；“data-*”屬性由兩部分組成：1、屬性名不要包含大寫字母，在“data-”后必須至少有一個字符；2、屬性值，該值可以是任何字符串。
本教程操作環境：windows7系統、HTML5版、Dell G3電腦。
html5自定義屬性data-*
data-* 屬性用于存儲私有頁面后應用的自定義數據，是 HTML5 新增的屬性。
<element data-*="somevalue">
-
somevalue：指定屬性值 (一個字符串)
data-* 屬性可以在所有的 HTML 元素中嵌入數據。
自定義的數據可以讓頁面擁有更好的交互體驗（不需要使用 Ajax 或去服務端查詢數據）。
data-* 屬性由以下兩部分組成：
-
屬性名不要包含大寫字母，在 data- 后必須至少有一個字符。
-
屬性值，該屬性值可以是任何字符串
注意： 自定義屬性前綴 "data-" 會被客戶端忽略。
利用dataset可以獲取data-屬性構造的對象，該方法目前只能在Chrome 、Opera等部分瀏覽器中實現，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。
只要在標簽里面以”data-”為前綴定義我們的自定義屬性就可以用來進行一些數據的存放。
<div id="myDiv" data-attribute="value">在標簽里設置H5新增的自定義屬性</div>
這個data屬性還可以應用在CSS中，前提是你的瀏覽器支持after偽類，以及content的attr屬性（低版本的IE不支持）：
<div id="myDiv" data-attribute="屬性值">data屬性應用于CSS中</div>
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
如何獲取data屬性的值？
<div id="myDiv" data-attribute="value">在標簽里設置H5新增的自定義屬性</div>
1、使用getAttribute來獲取
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");
2、使用Html5自定義屬性對象Dataset來獲取
var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;
注意：帶連字符連接的名稱在使用的時候需要命名駝峰化，即大小寫組合書寫，這與應用元素的style對象類似，dom.style.borderColor。例如data屬性為data-other-attribute，則我們要獲取相應的值可以使用：myp.dataset.otherAttribute
如果Html元素定義了多個自定義屬性，如何獲取？
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標簽里設置多個自定義屬性</div>
2、使用循環遍歷
var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j; for (i = 0, j = attrs.length; i < j; i++) { if(attrs[i].name.substring(0, 5) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }
3、使用dataset屬性
var expense = document.getElementById('myDiv').dataset;
注：dataset并不是典型意義上的JavaScript對象，而是個DOMStringMap對象，DOMStringMap是HTML5一種新的含有多個名-值對的交互變量
1）、讓所有的自定義的屬性值塞到一個數組中
var chartInput = []; for (var item in expense) { chartInput.push(expense[item]); }
2）、刪掉一個data屬性
delete myDiv.dataset.attribute;
3、增加一個data屬性
myDiv.dataset.attribute4 = 'value4';
dataset的兼容性處理
如果瀏覽器不支持dataset，有必要做一下兼容處理：
if(myDiv.dataset) { myDiv.dataset.attribute = "valueXX"; // 設置自定義屬性 var theValue = myDiv.dataset.attribute; // 獲取自定義屬性 } else { myDiv.setAttribute("data-attribute", "valueXX"); // 設置自定義屬性 var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性 }
結語：
使用dataset操作data 要比使用getAttribute速度稍微慢些，雖然使用dataset不能提高代碼的性能，但是對于簡潔代碼，提高代碼的可讀性和可維護性是很有幫助的。
【推薦課程：HTML5視頻教程、web前端】
