如何操作data-*属性？

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

**1. 设置 `data-*` 属性**

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

javascript 复制代码

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`

javascript 复制代码

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

**2. 修改 `data-*` 属性**

直接对 dataset 或 setAttribute 重新赋值：

javascript 复制代码

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

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

**3. 获取 `data-*` 属性**

方法 1：使用 `dataset`（推荐）

javascript 复制代码

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

方法 2：使用 `getAttribute`

javascript 复制代码

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

**4. 删除 `data-*` 属性**

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

javascript 复制代码

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

方法 2：使用 `removeAttribute`

javascript 复制代码

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

完整示例

html 复制代码

<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>

注意事项

命名规则
- HTML 中：data-user-id（连字符命名）。
- JS 中：div.dataset.userId（驼峰命名）。
数据类型
- dataset 返回的值始终是字符串，需手动转换类型：
  javascript 复制代码
```
const num = parseInt(div.dataset.userId);
const isActive = div.dataset.isActive === "true";
```
兼容性
- 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")`

如何操作data-*属性？

1. 设置 data-* 属性

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

方法 2：使用 setAttribute

2. 修改 data-* 属性

3. 获取 data-* 属性

方法 1：使用 dataset（推荐）

方法 2：使用 getAttribute

4. 删除 data-* 属性

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

方法 2：使用 removeAttribute

完整示例

注意事项

总结

**1. 设置 `data-*` 属性**

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

方法 2：使用 `setAttribute`

**2. 修改 `data-*` 属性**

**3. 获取 `data-*` 属性**

方法 1：使用 `dataset`（推荐）

方法 2：使用 `getAttribute`

**4. 删除 `data-*` 属性**

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

方法 2：使用 `removeAttribute`