HTML5的自定義屬性的使用總結

以前我們需要自定義屬性的時候一般是這樣做的，在標籤裏面加上我們自己設置的一些屬性：

<div id="myDiv" user-defined-attribute="value">在標籤裏設置自定義屬性</div>

然後獲取裏面的值是使用getAttribute來獲取自定義屬性裏面的值：

var myDiv = document.getElementById("myDiv");

var theValue = myDiv.getAttribute("user-defined-attribute");

現在H5爲我們提供了一個data屬性——“data-”前綴，可以讓所有的HTML元素支持自定義屬性，只要在標籤裏面以”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>

一、使用getAttribute來獲取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

二、使用Html5自定義屬性對象Dataset來獲取

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對象，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不能提高代碼的性能，但是對於簡潔代碼，提高代碼的可讀性和可維護性是很有幫助的。