使用資料屬性

HTML 旨在具有可擴充套件性，用於應與特定元素關聯但不需要任何定義含義的資料。 data-* 屬性 允許我們在標準的、語義化的 HTML 元素上儲存額外的資訊，而無需其他技巧，例如非標準屬性或 DOM 上的額外屬性。

HTML 語法

語法很簡單。任何元素上的任何屬性，其屬性名稱以 data- 開頭，都是資料屬性。假設您有一篇文章，並且想要儲存一些沒有視覺表示形式的額外資訊。只需為此使用 data 屬性即可

html
<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>

JavaScript 訪問

在 JavaScript 中讀取這些屬性的值也非常簡單。您可以使用 getAttribute() 及其完整的 HTML 名稱來讀取它們，但標準定義了一種更簡單的方法：一個 DOMStringMap，您可以透過 dataset 屬性讀取。

要透過 dataset 物件獲取 data 屬性，請獲取屬性名稱中 data- 後面的部分（注意，連字元會轉換為 駝峰式大小寫）。

js
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

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

每個屬性都是一個字串，可以讀取和寫入。在上述情況下，設定 article.dataset.columns = 5 會將該屬性更改為 "5"。

CSS 訪問

請注意，由於資料屬性是普通的 HTML 屬性，因此您甚至可以從 CSS 中訪問它們。例如，要顯示文章上的父資料，您可以使用 CSS 中的 生成內容 以及 attr() 函式

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

您還可以使用 CSS 中的 屬性選擇器 根據資料更改樣式

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

您可以在 此 JSBin 示例 中看到所有這些協同工作。

資料屬性還可以儲存以包含不斷變化的資訊，例如遊戲中的分數。在此處使用 CSS 選擇器和 JavaScript 訪問，您可以構建一些巧妙的效果，而無需編寫自己的顯示例程。請參閱 此螢幕截圖，瞭解使用生成內容和 CSS 過渡的示例（JSBin 示例）。

資料值是字串。數字值必須在選擇器中加引號，才能使樣式生效。

問題

不要在資料屬性中儲存應可見且可訪問的內容，因為輔助技術可能無法訪問它們。此外，搜尋爬蟲可能不會索引資料屬性的值。

另請參閱