首页 > web前端 > js教程 > 如何访问 JavaScript 元素中的数据属性?

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

Barbara Streisand
发布: 2024-10-27 08:38:31
原创
223 人浏览过

How do you access data attributes in JavaScript elements?

在 JavaScript 中获取数据属性

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

使用数据集访问数据属性

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

示例用法

考虑以下 HTML 元素:

1

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

登录后复制

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

1

2

3

4

5

6

7

8

<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 变量现在将包含一个具有数据属性值的对象:

1

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

登录后复制

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板