What are data- attributes good for?

屬于全局屬性，是 HTML5 中的新屬性。 data-* 屬性用于存儲頁面或應用程序的私有自定義數據。 data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的（自定義）數據能夠被頁面的 javaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。 data-* 屬性包括兩部分：

舉例

JS訪問 HTMLElement.dataset 屬性允許我們訪問所有在元素上自定義的data屬性 也可以使用getAttribute()配合它們完整的HTML名稱去讀取它們

賦值的話，將會將屬性值進行修改。

CSS 訪問 可以通過generated content使用函數attr()來顯示data-parent的內容：

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

注意

不要在data attribute里儲存需要顯示及訪問的內容，因為一些其他的技術可能訪問不到它們。另外爬蟲不能將data attribute的值編入索引中。 IE11+支持這個標準，但所有更早期的版本都不支持dataset。為了支持IE10及以下的版本，必須使用getAttribute() 來訪問。另外，讀取 data-attributes的行為相比JS存儲數據會慢。使用dataset 會比使用getAttribute()讀取數據來得慢。