HTML5的自定義屬性的使用總結
阿新 • • 發佈：2019-01-10
以前我們需要自定義屬性的時候一般是這樣做的，在標籤裡面加上我們自己設定的一些屬性：
<div id="myDiv" user-defined-attribute="value">在標籤裡設定自定義屬性</div>然後獲取裡面的值是使用getAttribute來獲取自定義屬性裡面的值：
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");現在H5為我們提供了一個data屬性——“data-”字首，可以讓所有的
<div id="myDiv" data-attribute="value">在標籤裡設定H5新增的自定義屬性</div>這個data屬性還可以應用在CSS中，前提是你的瀏覽器支援after偽類，以及content的attr屬性（低版本的IE不支援）：
<div id="myDiv" data-attribute="屬性值">data屬性應用於CSS中</div>如何獲取data屬性的值？#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
<div id="myDiv" data-attribute="value">在標籤裡設定H5新增的自定義屬性</div>一、使用getAttribute來獲取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;
注意：帶連字元連線的名稱在使用的時候需要命名駝峰化，即大小寫組合書寫，這與應用元素的style物件類似，
dom.style.borderColor。例如data屬性為data-other-attribute，則我們要獲取相應的值可以使用：myDiv.dataset.otherAttribute如果Html元素定義了多個自定義屬性，如何獲取？
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標籤裡設定多個自定義屬性</div>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;
}
}二、使用
dataset屬性
var expense = document.getElementById('myDiv').dataset;注：
dataset並不是典型意義上的JavaScript物件，而是個，DOMStringMap是HTML5一種新的含有多個名-值對的互動變數1、讓所有的自定義的屬性值塞到一個數組中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}data屬性
delete myDiv.dataset.attribute;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不能提高程式碼的效能，但是對於簡潔程式碼，提高程式碼的可讀性和可維護性是很有幫助的。