如何在 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中文網其他相關文章！