如何存取 JavaScript 元素中的資料屬性？

在JavaScript 中取得資料屬性

處理具有資料屬性（例如資料型別或資料點）的HTML 元素時，存​​取它們在JavaScript 中的值可能是一個挑戰。讓我們探索如何在 JavaScript 程式碼中檢索這些資料屬性。

使用資料集存取資料屬性

資料集屬性可讓您存取名稱為該元素的所有資料屬性以「資料-」開頭。若要取得特定資料屬性的值，只需使用不含“data-”前綴的屬性名稱即可。例如，要取得data-type 屬性的值，您可以使用this.dataset.type.

範例用法

考慮下列HTML 元素：

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

當此元素上發生事件時，您可以在事件處理函數中存取其資料屬性：

<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 變數現在將包含一個具有資料屬性值的物件：

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

以上是如何存取 JavaScript 元素中的資料屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！