What are data- attributes good for?
屬于全局屬性，是 HTML5 中的新屬性。 data-* 屬性用于存儲頁面或應用程序的私有自定義數據。 data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的（自定義）數據能夠被頁面的 javaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。 data-* 屬性包括兩部分：
屬性名不應該包含任何大寫字母，并且在前綴 “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使用函數attr()來顯示data-parent的內容：
article::before { content: attr(data-parent);}可以在CSS中使用屬性選擇器根據data來改變樣式：
article[data-columns='3'] { width: 400px;}article[data-columns='4'] { width: 600px;}不要在data attribute里儲存需要顯示及訪問的內容，因為一些其他的技術可能訪問不到它們。另外爬蟲不能將data attribute的值編入索引中。 IE11+支持這個標準，但所有更早期的版本都不支持dataset。為了支持IE10及以下的版本，必須使用getAttribute() 來訪問。另外，讀取 data-attributes的行為相比JS存儲數據會慢。使用dataset 會比使用getAttribute()讀取數據來得慢。
新聞熱點
疑難解答
