data-*属性用于存储私有数据，通过dataset访问和修改，支持动态交互与数据传递。
在HTML5中，data-* 属性提供了一种标准的方式来存储页面元素的私有数据。这些自定义属性可以用来传递与元素相关的额外信息，而不会影响文档的结构或样式。通过JavaScript可以方便地读取、修改和删除这些数据，实现动态交互。
data-* 属性的基本语法
所有以 data- 开头的属性都被视为自定义数据属性。例如：
上述代码为一个 div 元素定义了三个自定义数据：用户ID、姓名和角色。浏览器会自动将这些属性解析到元素的 dataset 对象中。
使用JavaScript访问数据集（dataset）
每个DOM元素都有一个 dataset 属性，它是一个 DOMStringMap 类型的对象，包含了该元素所有 data-* 属性的键值对。
立即学习“Java免费学习笔记（深入）”；
以刚才的 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。
修改和设置 data-* 属性
可以通过 JavaScript 动态修改 dataset 的值，从而更新对应的 data-* 属性：
userElement.dataset.name = “李四”;
userElement.dataset.active = “true”;
执行后，HTML 将自动更新为：
同样，删除某个 dataset 属性也会移除对应的 data-* 属性：
delete userElement.dataset.active;
实际应用场景
data-* 属性常用于以下场景：
存储配置参数：比如按钮的行为参数、弹窗的选项等前后端数据传递：服务端渲染时嵌入初始数据状态标记：记录元素当前状态，如是否已加载、选中等事件处理传参：避免闭包或绑定额外变量
示例：点击按钮显示用户信息
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操作数据集的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586810.html
微信扫一扫 
支付宝扫一扫 
