首頁  >  文章  >  web前端  >  如何在JavaScript程式碼中存取和使用資料屬性?

如何在JavaScript程式碼中存取和使用資料屬性?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-25 16:43:02423瀏覽

How to Access and Use Data Attributes in JavaScript Code?

在JavaScript 程式碼中擷取資料屬性

要存取JavaScript 程式碼中提供的HTML 元素以「data-」開頭的屬性,您需要需要利用dataset 屬性,如下面的程式碼所示:

<code class="js">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid), // Accessing data-typedId attribute
    subject: this.dataset.type, // Accessing data-type attribute
    points: parseInt(this.dataset.points), // Accessing data-points attribute
    user: "H. Pauwelyn"
  });
});</code>

執行此程式碼後,json 變數將包含一個具有以下值的物件:

{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "H. Pauwelyn"
}

該技術使您可以方便地存取並利用JavaScript 程式碼中的資料屬性,從而簡化HTML 標記中自訂屬性的管理和操作。

以上是如何在JavaScript程式碼中存取和使用資料屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn