HTML data-* 屬性

定義和用法

data-* 屬性用于存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性由兩部分組成：

  • 屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
  • 屬性值可以是任意字符串

注意：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

另請參閱：

HTML 教程：HTML 屬性

HTML DOM 參考手冊：HTML DOM getAttribute() 方法

實例

使用 data-* 屬性嵌入自定義數據：

<ul>
  <li data-animal-type="鳥類">喜鵲</li>
  <li data-animal-type="魚類">金槍魚</li>
  <li data-animal-type="蜘蛛">蠅虎</li>
</ul>

親自試一試

語法

<element data-*="somevalue">

屬性值

值 描述
somevalue 規定屬性的值（以字符串）。

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6