在 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中文网其他相关文章!