Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML data-* 属性


定义和用法

data-* 属性用于存储特定于页面或应用程序的自定义数据。

data-* 属性使我们能够在所有 HTML 元素上嵌入自定义数据属性。

然后,存储的(自定义)数据可以在页面的 JavaScript 中使用,以创建更具吸引力的用户体验(无需任何 Ajax 调用或服务器端数据库查询)。

data-* 属性由两部分组成

  1. 属性名称不应包含任何大写字母,并且在“data-”前缀之后必须至少包含一个字符。
  2. 属性值可以是任何字符串。

注意:以“data-”为前缀的自定义属性将被用户代理完全忽略。


适用范围

data-* 属性是一个全局属性,可以在任何 HTML 元素上使用。

元素 属性
所有 HTML 元素 data-*

示例

示例

使用 data-* 属性嵌入自定义数据

<ul>
  <li data-animal-type="bird">猫头鹰</li>
  <li data-animal-type="fish">鲑鱼</li>
  <li data-animal-type="spider">狼蛛</li>
</ul>
亲自试一试 »

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

属性
data-* 4.0 5.5 2.0 3.1 9.6

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.