HTML data-* 属性

htmlweb developmentfront end technology更新于 2025/3/22 13:00:17

HTML 中的 data-* 属性用于在所有 HTML 元素上嵌入自定义数据属性。这是一个全局属性，可用于任何元素。

以下是语法 −

<element data-attribute-name=”attribute_value”

以上，属性名称只能包含小写字母。因此，它必须至少比前缀"data-"长一个字符。

现在让我们看一个在 HTML 中实现 data-* 属性的示例。点击任意属性即可查看更多信息 −

示例

<!DOCTYPE html>
<html>
<head>
<script>
   function display(tutorial) {
      var type = tutorial.getAttribute("data-tutorial-type");
      alert(tutorial.innerHTML + " = " + type + ".");
   }
</script>
</head>
<body>
   <h1>Tutorials</h1>
   <h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
   <h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
   <h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>