如何在 JavaScript 中访问数据属性：为什么 `this.typeId` 不起作用以及如何使用 `dataset` 代替？-js教程-PHP中文网

如何在 JavaScript 中访问数据属性：为什么 `this.typeId` 不起作用以及如何使用 `dataset` 代替？

DDD

发布： 2024-10-26 06:42:30

原创

1089 人浏览过

How to Access Data Attributes in JavaScript: Why `this.typeId` Doesn't Work and How to Use `dataset` Instead?

在 JavaScript 中获取数据属性

在 HTML 元素中，数据属性提供了一种存储附加信息的便捷方法。然而，在 JavaScript 中访问这些属性可能很棘手。让我们深入研究一个特定问题并探讨其解决方案。

挑战

考虑以下 HTML 代码：

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

登录后复制

在 JavaScript 中，我们的目标是检索这些数据属性并在 JSON 对象中使用它们，如下所示：

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

登录后复制

但是，尝试使用 this.typeId、this.datatype 和 this.points 访问数据属性会产生 null。

解决方案

要在 JavaScript 中访问数据属性，我们必须使用 dataset 属性。下面是实现我们目标的修改后的代码：

<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: "Luïs"
  });
});</code>

登录后复制

生成的 JSON 对象将包含所需的数据：

<code class="json">{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }</code>

登录后复制

通过利用 dataset 属性，我们可以轻松检索数据属性JavaScript，使我们能够在代码中利用它们的值。

以上是如何在 JavaScript 中访问数据属性：为什么 `this.typeId` 不起作用以及如何使用 `dataset` 代替？的详细内容。更多信息请关注PHP中文网其他相关文章！