data-*属性用于存储私有数据，通过dataset访问和修改，支持动态交互与数据传递。
在HTML5中，data-* 属性提供了一种标准的方式来存储页面元素的私有数据。这些自定义属性可以用来传递与元素相关的额外信息，而不会影响文档的结构或样式。通过JavaScript可以方便地读取、修改和删除这些数据，实现动态交互。
所有以 data- 开头的属性都被视为自定义数据属性。例如：
<div id="user" data-id="123" data-name="张三" data-role="admin"></div>上述代码为一个 div 元素定义了三个自定义数据：用户ID、姓名和角色。浏览器会自动将这些属性解析到元素的 dataset 对象中。
每个DOM元素都有一个 dataset 属性，它是一个 DOMStringMap 类型的对象，包含了该元素所有 data-* 属性的键值对。
立即学习“Java免费学习笔记（深入）”；
以刚才的 div 为例，可以通过以下方式获取数据：
const userElement = document.getElementById('user');注意：data-* 中的连字符在 dataset 中变为驼峰命名。例如 data-user-role 会变成 userRole。
可以通过 JavaScript 动态修改 dataset 的值，从而更新对应的 data-* 属性：
userElement.dataset.name = "李四";执行后，HTML 将自动更新为：
<div id="user" data-id="123" data-name="李四" data-role="admin" data-active="true"></div>同样，删除某个 dataset 属性也会移除对应的 data-* 属性：
delete userElement.dataset.active;data-* 属性常用于以下场景：
示例：点击按钮显示用户信息
<button data-user-id="456" data-action="view-profile">查看资料</button>document.querySelector('button').addEventListener('click', function() {
const userId = this.dataset.userId;
const action = this.dataset.action;
alert(执行操作：${action}，用户ID：${userId});
});
基本上就这些。合理使用 data-* 和 dataset 可以让HTML与JavaScript之间的数据通信更清晰、简洁，同时保持良好的语义性和可维护性。
以上就是html5使用data-*属性传递参数 html5使用JavaScript操作数据集的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
878
收藏
