What are data- attributes good for?
屬于全局屬性，是 HTML5 中的新屬性。 data-* 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。 data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的（自定義）數(shù)據(jù)能夠被頁面的 javaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。 data-* 屬性包括兩部分：
屬性名不應(yīng)該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個字符屬性值可以是任意字符串JS訪問 HTMLElement.dataset 屬性允許我們訪問所有在元素上自定義的data屬性 也可以使用getAttribute()配合它們完整的HTML名稱去讀取它們
var article = document.querySelector('#electriccars');article.dataset.columns // "3"article.dataset.indexNumber // "12314"article.dataset.parent // "cars"賦值的話，將會將屬性值進行修改。
CSS 訪問 可以通過generated content使用函數(shù)attr()來顯示data-parent的內(nèi)容：
article::before { content: attr(data-parent);}可以在CSS中使用屬性選擇器根據(jù)data來改變樣式：
article[data-columns='3'] { width: 400px;}article[data-columns='4'] { width: 600px;}不要在data attribute里儲存需要顯示及訪問的內(nèi)容，因為一些其他的技術(shù)可能訪問不到它們。另外爬蟲不能將data attribute的值編入索引中。 IE11+支持這個標準，但所有更早期的版本都不支持dataset。為了支持IE10及以下的版本，必須使用getAttribute() 來訪問。另外，讀取 data-attributes的行為相比JS存儲數(shù)據(jù)會慢。使用dataset 會比使用getAttribute()讀取數(shù)據(jù)來得慢。
新聞熱點
疑難解答
