Movatterモバイル変換


[0]ホーム

URL:


  1. 給開發者的 Web 技術文件
  2. HTML:超文本標記語言
  3. HTML 參考
  4. Global attributes
  5. data-*

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in EnglishAlways switch to English

data-*

data-*全域屬性構成一組稱作自訂 data 屬性的屬性。它能令HTML 與其DOM 擁有給腳本用的交換資訊。這種屬性設置的自訂資料,能透過元素的HTMLElement 介面而活用。HTMLElement.dataset property 允許訪問它們。* 可以是任何遵循以下規則的xml 名稱

  • 名字絕對不能以xml 起頭,無論是否用於 xml、
  • 名字絕對不能包含分號(U+003A)、
  • 名字絕對不能包含大寫A 到大小Z 的拉丁字母。

請注意HTMLElement.dataset property 是個DOMStringMap,而自訂的 data 屬性名data-test-value 因為所有的減號(U+002D)都會被消去、緊接著的第一個字母,會被取代為駝峰式(camelcase)名字,所以要透過HTMLElement.dataset.testValueHTMLElement.dataset["testValue"] 訪問。

用法

藉由增加data-* 屬性,即使是普通的 HTML 元素也能變成複雜而強大程式物件。例如說遊戲裡面的太空船精靈 能成為帶有class 與數個 data-* 屬性的<img> 元素:

<img src="shipX3.png"  data-ship-id="324"   data-weapons="laserI laserII"   data-shields="72%"  data-x="414354" data-y="85160" data-z="31940"  />

(參見這個網站

規範

Specification
HTML
# attr-data-*

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp