html5如何使用data-*属性传递参数并通过JavaScript操作数据集

html5引入的data-*属性允许开发者在HTML元素上存储自定义数据，这些数据不会在页面渲染时显示，也不会影响页面样式，非常适合用来传递临时参数或者组件配置信息，配合JavaScript的dataset对象可以轻松完成数据的读写操作。

data-*属性的基本规则

data-*属性的命名需要遵循固定格式，属性名必须以data-开头，后面跟随自定义的名称，自定义名称只能包含小写字母、数字、连字符-、点号.、冒号:和下划线_，不能包含大写字母，否则可能无法被正确识别。

常见的属性定义示例如下：

<div id="userCard" data-user-id="1001" data-user-name="张三" data-login-time="1692000000">
  用户卡片
</div>
<button data-action-type="submit" data-target-id="form1">提交</button>

通过JavaScript读取data-*属性

JavaScript提供了dataset对象来操作元素上的data-*属性，该对象挂载在DOM元素上，所有data-*属性都会自动映射到dataset对象的属性中，映射规则是将属性名中的data-前缀去掉，然后将连字符后面的字母转为大写，也就是驼峰命名法。

读取单个属性值

以下代码演示如何读取上面定义的div元素上的data-*属性：

// 获取目标元素
const userCard = document.getElementById('userCard');
// 读取data-user-id属性，对应dataset的userId属性
const userId = userCard.dataset.userId;
// 读取data-user-name属性，对应dataset的userName属性
const userName = userCard.dataset.userName;
// 读取data-login-time属性，对应dataset的loginTime属性
const loginTime = userCard.dataset.loginTime;

console.log(userId); // 输出 "1001"
console.log(userName); // 输出 "张三"
console.log(loginTime); // 输出 "1692000000"

遍历所有data-*属性

如果需要获取元素上所有的data-*属性，可以使用Object.entries()方法遍历dataset对象：

const userCard = document.getElementById('userCard');
// 遍历所有data属性
for (const [key, value] of Object.entries(userCard.dataset)) {
  console.log(`属性名：${key}，属性值：${value}`);
}
// 输出结果：
// 属性名：userId，属性值：1001
// 属性名：userName，属性值：张三
// 属性名：loginTime，属性值：1692000000

通过JavaScript修改data-*属性

dataset对象不仅支持读取属性，也支持修改和新增data-*属性，修改后页面上对应的HTML属性会同步更新。

const userCard = document.getElementById('userCard');
// 修改已有的data-user-name属性
userCard.dataset.userName = "李四";
// 新增一个data-user-age属性
userCard.dataset.userAge = "25";
// 删除data-login-time属性
delete userCard.dataset.loginTime;

// 查看修改后的HTML属性
console.log(userCard.outerHTML);
// 输出 <div id="userCard" data-user-id="1001" data-user-name="李四" data-user-age="25">用户卡片</div>

数据类型注意事项

需要注意，通过dataset读取到的所有属性值都是字符串类型，即使存储的是数字或者布尔值，也会被转为字符串，实际使用时需要根据需求做类型转换。

const userCard = document.getElementById('userCard');
// 读取的userId是字符串类型
console.log(typeof userCard.dataset.userId); // 输出 "string"
// 转为数字类型
const userIdNum = Number(userCard.dataset.userId);
console.log(typeof userIdNum); // 输出 "number"

// 存储布尔值的情况
userCard.dataset.isVip = "true";
const isVip = userCard.dataset.isVip === "true";
console.log(isVip); // 输出 true

实际开发场景示例

在列表渲染场景中，经常需要用data-*属性存储每条数据的唯一标识，方便后续操作：

<ul id="goodsList">
  <li data-goods-id="101" data-price="299">商品A <button class="buy-btn">购买</button></li>
  <li data-goods-id="102" data-price="499">商品B <button class="buy-btn">购买</button></li>
  <li data-goods-id="103" data-price="199">商品C <button class="buy-btn">购买</button></li>
</ul>

// 给所有购买按钮绑定点击事件
document.querySelectorAll('.buy-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的li元素
    const li = this.parentElement;
    // 读取商品id和价格
    const goodsId = li.dataset.goodsId;
    const price = Number(li.dataset.price);
    console.log(`购买商品ID：${goodsId}，价格：${price}元`);
    // 后续可以发起购买请求等操作
  });
});

使用注意事项

• 不要在data-*属性中存储敏感信息，因为用户可以通过浏览器开发者工具轻松查看和修改这些属性值。
• 自定义名称不要使用大写字母，即使写了大写字母，在dataset中也会被转为小写，比如data-User-Id会被映射为dataset.user_id而不是dataset.userId。
• 如果需要兼容非常老的浏览器（如IE10及以下），dataset对象可能不被支持，此时可以使用getAttribute('data-xxx')和setAttribute('data-xxx', value)方法来操作data-*属性。

总结：data-*属性是html5提供的轻量级数据传递方案，配合JavaScript的dataset对象可以快速完成自定义数据的读写，掌握其命名规则和类型特性，能有效提升前端开发中组件间数据交互的效率。

html5data_*属性JavaScript数据集操作修改时间：2026-07-03 16:52:01