data-*

所有這些自定義資料都可以透過設定屬性的元素的 HTMLElement 介面獲得。 HTMLElement.dataset 屬性可以訪問它們。* 可以替換為任何遵循 XML 名稱的生產規則 的名稱，包括以下建議

• 名稱不應以 xml（不區分大小寫）開頭，因為它保留供未來 XML 規範使用。
• 名稱不應包含任何冒號字元 (:)，因為 XML 會將此類名稱賦予特定含義。
• 名稱不應包含任何大寫字母，因為 XML 全部使用小寫字母。

這些只是建議。如果不遵循這些命名建議，不會出現任何錯誤。屬性仍然可以使用 CSS 的 屬性選擇器 進行匹配，屬性不區分大小寫，但屬性值區分大小寫。不符合這三個建議的屬性也會被 JavaScript HTMLElement.dataset 屬性識別，並且使用者代理會將該屬性包含在包含 HTMLElement 所有自定義資料屬性的 DOMStringMap 中。

如果您計劃使用 HTMLElement.dataset，則屬性名稱中 data- 之後的部分只能包含 JavaScript 屬性名稱中允許的字元（以及連字元，連字元將被刪除）。dataset 版本的屬性名稱會刪除 "data-" 字首，並將名稱的剩餘部分從 kebab-case 轉換為 camelCase。例如，element.getAttribute("data-test") 等效於 element.dataset.test，而 data-test-abc 將可以透過 HTMLElement.dataset.testAbc（或 HTMLElement.dataset["testAbc"]）訪問。請避免使用連字元後面的非字母字元，例如 data-test-1 或 data--test，因為它們不會被 HTMLElement.dataset 識別。

透過新增 data-* 屬性，即使是普通的 HTML 元素也可以變得相當複雜和強大，成為程式物件。例如，遊戲中的一艘宇宙飛船 "精靈" 可以是一個簡單的 <img> 元素，帶有 class 屬性和幾個 data-* 屬性

<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()" />

有關使用 HTML 資料屬性的更深入教程，請參閱 使用資料屬性。

• 所有 全域性屬性。
• 允許訪問和修改這些值的 HTMLElement.dataset 屬性。
• 使用資料屬性