使用數據屬性

使用數據屬性

 

HTML5是具備擴展性的設計，它初衷是數據應與特定的元素相關聯，但不須要任何定義。data-* 屬性容許咱們在標準內於HTML元素中存儲額外的信息，而不須要使用相似於 classList，標準外屬性，DOM額外屬性或是 setUserData之類的伎倆。

HTML 語法

語法很是簡單。全部在元素上以data-開頭的屬性爲數據屬性。好比說你有一篇文章，而你又想要存儲一些不須要顯示在瀏覽器上的額外信息。請使用data屬性：

1 <article
2   id="electriccars"
3   data-columns="3"
4   data-index-number="12314"
5   data-parent="cars">
6 ...
7 </article>

 

JavaScript 訪問Section

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

爲了使用dataset對象去獲取到數據屬性，須要獲取屬性名中data-以後的部分(要注意的是破折號鏈接的名稱須要改寫爲駱駝拼寫法(如"index-number"轉換爲"indexNumber"))。

1 var article = document.querySelector('#electriccars');
2  
3 article.dataset.columns // "3"
4 article.dataset.indexNumber // "12314"
5 article.dataset.parent // "cars"

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

CSS 訪問Section

請注意到，data attributes設定爲HTML屬性，他們一樣能被CSS訪問.好比你能夠經過generated content使用函數attr()來顯示data-parent的內容：

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

 

你也一樣能夠在CSS中使用屬性選擇器根據data來改變樣式：

1 article[data-columns='3'] {
2   width: 400px;
3 }
4 article[data-columns='4'] {
5   width: 600px;
6 }

 

你能夠在這個JSBin 的實例裏面看到所有的演示。

 

Data屬性一樣能夠存儲不斷變化的信息，好比遊戲的得分。使用CSS選擇器與JavaScript去訪問可讓你獲得花俏的效果，這裏你並不須要用常規的編寫方案來編寫代碼。 請參考這個牆外視頻  (JSBin example).

IssuesSection

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

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

儘管如此,對於那些與元素相關的數據,這依然是一個很好的解決方案.

在FireFox 49.0.2(其餘版本也有可能)中,javascript將沒法讀出包含1022個及以上字符的data屬性(EcmaScript 4).

參閱Section

 

• 該文章源自 Using data attributes in JavaScript and CSS on hacks.mozilla.org.
• 在 SVG 2中也一樣支持自定義data屬性; 請參看SVGElement.dataset 和data-*.
• How to use HTML5 data attributes (Sitepoint)