HTML 語法

語法非常簡單。所有在元素上以data-開頭的屬性為數據屬性。比如說你有一片文章，你想要存儲一些沒有可視化展現意義的額外信息。請使用data屬性：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

JavaScript 訪問Edit

在外部使用JavaScript去訪問這些屬性的值同樣非常簡單。你可以使用getAttribute()配合它們完整的HTML名稱去讀取它們，但標準定義了一個更簡單的方法：DOMStringMap你可以使用dataset讀取到數據。

為了使用dataset對象去獲取到數據屬性，需要獲取屬性名中data-之後的部分(要註意的是破折號連接的名稱需要轉換為駝峰樣式的名稱)。

var article = document.querySelector(‘#electriccars‘);

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

每一個屬性都是一個可讀寫的字符串。在上面的例子中，article.dataset.columns = 5.將會調整屬性的值為5。

CSS 訪問Edit

請註意到，data attributes設定為HTML屬性，他們同樣能被CSS訪問.比如你可以通過generated content使用函數attr()來顯示data-parent的內容：

article::before {
  content: attr(data-parent);
}

你同樣可以在CSS中使用屬性選擇器根據data來改變樣式：

article[data-columns=‘3‘] {
  width: 400px;
}
article[data-columns=‘4‘] {
  width: 600px;
}

你可以在這個JSBin 的實例裏面看到全部的演示。

Data屬性同樣可以存儲不斷變化的信息，比如遊戲的得分。使用CSS選擇器與JavaScript去訪問可以讓你得的花俏的效果，這裏你並不需要你編寫你常規的編寫方案。 請參考這個視頻 (JSBin example).

IssuesEdit

不要在data attribute裏儲存需要顯示及訪問的內容，因為一些其他的技術可能訪問不到它們。另外爬蟲不能將data attribute的值編入索引中。

IE的支持度及顯示效果是最主要討論的問題。IE11+支持這個標準，但所有更早期的版本都不支持dataset。為了支持IE10及以下的版本，你必須使用getAttribute() 來訪問。另外，讀取 data-attributes的行為相比JS存儲數據會慢。使用dataset 會比使用getAttribute()讀取數據來得慢。

出處：https://www.jianshu.com/p/b4f297ad3c04

HTML之Data attributes