JS dataset：獲取HTML元素的自定義屬性

HTML 5 允許使用者為元素自定義屬性，但要求新增 data- 字首，目的是為元素提供與渲染無關的附加資訊，或者提供語意資訊。例如：

<div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhang123">自定義資料屬性</div>

新增自定義屬性之後，在 JavaScript 中可以通過元素的 dataset 屬性存取自定義屬性。dataset 屬性的值是一個 DOMStringMap 範例，也就是一個名值對的對映。在這個對映中，每個 data-name 形式的屬性都會有一個對應的屬性，只不過屬性名沒有 data- 字首。

瀏覽器支援狀態：Firefox 6+ 和 Chrome。

範例

下面程式碼演示了如何自定義屬性，以及如何讀取這些附加資訊。

var div = document.getElementById("box");
//存取自定義屬性值
var id = div.dataset.myid;
var name = div.dataset.myname;
var pass = div.dataset.mypass;
//重置自定義屬性值
div.dataset.myid = "66666";
div.dataset.myname = "zhangsan";
div.dataset.mypass = "zhangsan666";
//檢測自定義屬性
if (div.dataset.myname) {
    console.log(div.dataset.myname);
}

雖然上述用法未獲得所有瀏覽器支援，但是我們仍然可以使用這種方式為元素新增自定義屬性，然後使用 getAttribute() 方法讀取元素附加的資訊。