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-* 属性来嵌入自定义数据

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

定义和用法

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

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

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

The data-* 属性由两部分组成

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

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


浏览器支持

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

属性
data-* 4.0 5.5 2.0 3.1 9.6

语法

<element data-*="somevalue">

属性值

描述
somevalue 指定属性的值(作为字符串)

相关页面

HTML 教程:HTML 属性

HTML DOM 参考:HTML DOM getAttribute() 方法


×

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.