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

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

现在，假设您需要捕获数据属性以“data-”开头并提取特定值的 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>

要解决此问题，您必须访问 dataset 属性，该属性提供所有数据属性的类似地图的集合。更正后的 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>

这将成功捕获所需的值：

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

通过利用 dataset 属性，您可以轻松地访问和操作 JavaScript 中的数据属性，为您的代码提供更多控制和灵活性。

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