首页 > 文章 > 前端

HTML5data-*属性详解与JS操作方法

时间：2026-04-20 16:28:29 371浏览收藏

HTML5的data-*属性为网页元素提供了标准、语义化的私有数据存储方式，配合JavaScript的dataset API可轻松实现数据的读取、动态修改与删除，无缝支撑按钮行为配置、状态标记、前后端数据传递及事件处理传参等实际场景——既避免了污染全局变量或滥用class/id，又让HTML结构更清晰、JS逻辑更简洁可维护，是现代前端开发中不可或缺的轻量级数据桥梁。

html5使用data-*属性传递参数 html5使用JavaScript操作数据集

在HTML5中，data-* 属性提供了一种标准的方式来存储页面元素的私有数据。这些自定义属性可以用来传递与元素相关的额外信息，而不会影响文档的结构或样式。通过JavaScript可以方便地读取、修改和删除这些数据，实现动态交互。

data-* 属性的基本语法

所有以 data- 开头的属性都被视为自定义数据属性。例如：

上述代码为一个 div 元素定义了三个自定义数据：用户ID、姓名和角色。浏览器会自动将这些属性解析到元素的 dataset 对象中。

使用JavaScript访问数据集（dataset）

每个DOM元素都有一个 dataset 属性，它是一个 DOMStringMap 类型的对象，包含了该元素所有 data-* 属性的键值对。

以刚才的 div 为例，可以通过以下方式获取数据：

const userElement = document.getElementById('user');
console.log(userElement.dataset.id); // 输出: "123"
console.log(userElement.dataset.name); // 输出: "张三"
console.log(userElement.dataset.role); // 输出: "admin"

注意：data-* 中的连字符在 dataset 中变为驼峰命名。例如 data-user-role 会变成 userRole。