在 JavaScript 中获取数据属性的值

属性可以被认为是 HTML 标签的属性。不同的 HTML 元素具有不同的属性，这些属性在 HTML 元素标签中指定。

我们将在本文中学习如何在 JavaScript 中获取数据属性的值。

dataset 属性是 HTML 元素的只读属性，可帮助我们读取/写入数据属性。它提供了一个字符串映射 (DOMStringMap)，其中包含每个 data-* 属性的条目。属性的名称应以 data- 开头。

请参考下面的示例。

• HTML

<div id="user" data-id="1" data-user="xyz" data-age="18">User 1</div>

• JavaScript

要访问属性名称，请删除前缀 data- 并将 dash-style 转换为 camelCase。

const person = document.querySelector("#user");
// person.dataset.id = 1
// person.dataset.user = "xyz"

console.log(person.dataset.user);
console.log(person.dataset.age);

输出：

xyz
18

在上面的示例中，我们使用 querySelector() 函数选择所需的 HTML 元素。我们使用 dataset 属性访问属性的数据并打印这些访问的值。我们在上面的例子中显示了 data-user 和 data-age 属性。