js dataset

// 示例代码：使用 dataset 属性访问和修改 HTML 元素的 data-* 属性

// HTML 部分
/*
<div id="myElement" data-name="example" data-id="123" data-is-active="true">Hello World</div>
*/

// JavaScript 部分
const element = document.getElementById('myElement');

// 获取 data 属性
console.log(element.dataset.name);      // 输出: example
console.log(element.dataset.id);        // 输出: 123
console.log(element.dataset.isActive);  // 输出: true (注意这里会自动将连字符转为驼峰命名)

// 设置 data 属性
element.dataset.name = 'newExample';
element.dataset.newAttribute = 'value'; // 添加新的 data 属性

console.log(element.outerHTML);
// 输出: <div id="myElement" data-name="newExample" data-id="123" data-is-active="true" data-new-attribute="value">Hello World</div>

解释说明：

• dataset 是一个只读属性，返回一个 DOMStringMap 对象，该对象提供了对元素所有 data-* 属性的访问。
• data-* 属性是自定义属性，通常用于存储页面或应用程序的私有数据。
• 访问 data-* 属性时，连字符（-）会被转换为驼峰命名法（camelCase）。例如，data-is-active 会变成 isActive。
• 可以通过 dataset 动态地获取或设置这些自定义属性的值。