js-获取标签元素data-xxx属性值的方法

发表于 本文字数： 156 阅读时长 ≈ 1 分钟

# JS

js-获取标签元素data-xxx属性值的方法

标签上有两个属性data-id 和 data-user-name, 需要通过js去获取

个人认为较为好用的方法为：使用getAttribute/setAttribute/removeAttribute ，较为直观和易读。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let user = document.querySelector("#user");

// 取值
console.log(user.getAttribute("data-id")); // 666
console.log(user.getAttribute("data-user-name")); // Tom
console.log(typeof user.getAttribute("data-id")); // string

// 赋值
user.setAttribute("data-id", 777);

// 新增属性
user.setAttribute("data-age", 23);

// 删除属性
user.removeAttribute("data-user-name");
// <div id="user" data-id="777" data-age="23"></div>

Reference

js: 获取标签元素data-*属性值的方法_js获取元素指定属性值的方法_彭世瑜的博客-CSDN博客