如何在 JavaScript 中访问和使用数据属性？

在 JavaScript 中访问数据属性的值

在 HTML 中，数据属性提供了一种存储有关元素的附加信息而不影响其视觉效果的方法推介会。要在 JavaScript 代码中访问这些属性，您需要使用 dataset 属性。

考虑以下具有各种数据属性的 HTML 元素：

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

检索这些数据属性的值并在 JavaScript 代码中使用它们，您可以编写：

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

dataset 属性返回一个包含元素的所有数据属性的对象，其中属性名称是带有“data-”的原始属性名称。 " 前缀已删除。在上面的代码中，我们使用此对象填充 JSON 对象，然后可用于进一步处理或发送到服务器。

此代码的结果将是表示该对象的 JSON 字符串：

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

这演示了如何使用 dataset 属性访问 JavaScript 代码中的数据属性值，使您可以轻松提取和操作此信息以用于各种目的。

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