如何访问 JavaScript 元素中的数据属性？

在 JavaScript 中获取数据属性

处理具有数据属性（例如数据类型或数据点）的 HTML 元素时，访问它们在 JavaScript 中的值可能是一个挑战。让我们探索如何在 JavaScript 代码中检索这些数据属性。

使用数据集访问数据属性

数据集属性允许您访问名称为该元素的所有数据属性以“数据-”开头。要获取特定数据属性的值，只需使用不带“data-”前缀的属性名称即可。例如，要获取 data-type 属性的值，您可以使用 this.dataset.type.

示例用法

考虑以下 HTML 元素：

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

当此元素上发生事件时，您可以在事件处理函数中访问其数据属性：

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "H. Pauwelyn"
  });
});</code>

结果

json 变量现在将包含一个具有数据属性值的对象：

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

以上是如何访问 JavaScript 元素中的数据属性？的详细内容。更多信息请关注PHP中文网其他相关文章！