如何操作data-*属性？

在 JavaScript 中操作 <div> 元素的 data-* 属性（自定义数据属性），可以通过以下方法实现设置、修改、获取和删除操作：

---

1. 设置 data-* 属性

方法 1：使用 dataset 属性（推荐）

const div = document.querySelector("div");

// 设置单个属性（驼峰命名）
div.dataset.userId = "123";    // HTML: data-user-id
div.dataset.userRole = "admin"; // HTML: data-user-role

// 批量设置属性
Object.assign(div.dataset, {
  userId: "456",
  isActive: "true"
});

方法 2：使用 setAttribute

div.setAttribute("data-user-id", "123");
div.setAttribute("data-user-role", "admin");

---

2. 修改 data-* 属性

直接对 dataset 或 setAttribute 重新赋值：

// 通过 dataset 修改
div.dataset.userId = "789"; 

// 通过 setAttribute 修改
div.setAttribute("data-user-id", "789");

---

3. 获取 data-* 属性

方法 1：使用 dataset（推荐）

console.log(div.dataset.userId);    // 输出: "123"
console.log(div.dataset.userRole);  // 输出: "admin"

方法 2：使用 getAttribute

console.log(div.getAttribute("data-user-id"));   // 输出: "123"
console.log(div.getAttribute("data-user-role")); // 输出: "admin"

---

4. 删除 data-* 属性

方法 1：使用 delete 操作符（针对 dataset）

delete div.dataset.userId;    // 删除 data-user-id
delete div.dataset.userRole;  // 删除 data-user-role

方法 2：使用 removeAttribute

div.removeAttribute("data-user-id");
div.removeAttribute("data-user-role");

---

完整示例

<div id="myDiv" data-role="user">示例 DIV</div>

<script>
  const div = document.getElementById("myDiv");

  // 设置属性
  div.dataset.userId = "1001";
  div.setAttribute("data-status", "active");

  // 修改属性
  div.dataset.userId = "1002";
  div.setAttribute("data-status", "inactive");

  // 获取属性
  console.log(div.dataset.userId);          // "1002"
  console.log(div.getAttribute("data-role")); // "user"

  // 删除属性
  delete div.dataset.userId;
  div.removeAttribute("data-status");
</script>

---

注意事项

1. 命名规则

   • HTML 中：data-user-id（连字符命名）。
   • JS 中：div.dataset.userId（驼峰命名）。

2. 数据类型

   • dataset 返回的值始终是字符串，需手动转换类型：

     const num = parseInt(div.dataset.userId);
     const isActive = div.dataset.isActive === "true";

3. 兼容性

   • dataset 支持现代浏览器（IE11+），旧浏览器需用 getAttribute/setAttribute。

---

总结

操作	方法	示例
设置属性	div.dataset.key = value	div.dataset.userId = "123"
	div.setAttribute("data-key", value)	div.setAttribute("data-user-id", "123")
修改属性	重新赋值 dataset 或 setAttribute	div.dataset.userId = "456"
获取属性	div.dataset.key	console.log(div.dataset.userId)
	div.getAttribute("data-key")	div.getAttribute("data-user-id")
删除属性	delete div.dataset.key	delete div.dataset.userId
	div.removeAttribute("data-key")	div.removeAttribute("data-user-id")