HTMLElement dataset属性

dataset提供了对元素上自定义数据属性data-*的读/写访问，它暴露了一个字符串映射（DOMStringMap），其中包含每个data-*属性条目。

读取属性

data- 前缀后的部分会转换为驼峰命名，作为 dataset 的属性名。

<div id="user" data-id="42" data-user-name="张三">用户</div>

const user = document.getElementById('user');

console.log(user.dataset.id);        // "42"
console.log(user.dataset.userName);   // "张三"

写入属性

给 dataset 的属性赋值，会自动在元素上创建对应的 data-* 属性。

user.dataset.status = 'active';

// HTML 变为：<div id="user" data-id="42" data-user-name="张三" data-status="active">

使用场景

常用于在 HTML 中存储状态或数据，配合 JavaScript 交互，例如切换按钮状态、绑定配置项等，避免额外维护全局变量。