HTML5中自定义数据属性data-*自定义数据

在HTML5中，可以使用data-*属性来在元素上存储额外的信息。data-*属性的名称必须以data-开头，后面跟上至少一个字符的自定义名称。这些属性可以用JavaScript通过dataset属性来访问。

以下是一些使用data-*属性的例子：

<!-- 使用 data-* 属性存储用户信息 -->
<div id="user" data-name="张三" data-age="30" data-email="zhangsan@example.com"></div>
 
<!-- 使用 data-* 属性存储产品信息 -->
<div id="product" data-price="99.99" data-stock="30" data-category="电子产品"></div>

使用JavaScript访问这些数据：

// 获取元素
var user = document.getElementById('user');
var product = document.getElementById('product');
 
// 通过 dataset 访问 data-* 属性
console.log(user.dataset.name); // 输出：张三
console.log(user.dataset.age); // 输出：30
console.log(product.dataset.price); // 输出：99.99

dataset属性返回一个DOMStringMap对象，它是一个动态的属性集合，可以通过属性名直接访问。注意，如果属性名包含连字符（如data-user-name），则在dataset中使用驼峰命名（如userName）来访问。