如何在 JavaScript 中存取資料屬性：為什麼 `this.typeId` 不起作用以及如何使用 `dataset` 取代？

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

在JavaScript 中，我們的目標是檢索這些資料屬性並在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>

但是，嘗試使用this.typeId、this.datatype 和this.points 存取資料屬性會產生null。

解決方案

要在 JavaScript 中存取資料屬性，我們必須使用 dataset 屬性。以下是實現我們目標的修改後的程式碼：

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

產生的JSON 物件將包含所需的資料：

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

透過利用dataset 屬性，我們可以輕鬆檢索資料屬性JavaScript，使我們能夠在程式碼中利用它們的值。

以上是如何在 JavaScript 中存取資料屬性：為什麼 `this.typeId` 不起作用以及如何使用 `dataset` 取代？的詳細內容。更多資訊請關注PHP中文網其他相關文章！