如何在 JavaScript 中存取和使用資料屬性？

在JavaScript 中存取資料屬性的值

在HTML 中，資料屬性提供了一種儲存有關元素的附加資訊而不影響其視覺效果的方法推廣會。要在 JavaScript 程式碼中存取這些屬性，您需要使用 dataset 屬性。

考慮以下具有各種資料屬性的HTML 元素：

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

檢索這些資料屬性的值並在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>

dataset 屬性傳回一個包含元素的所有資料屬性的對象，其中屬性名稱是帶有「data-」的原始屬性名稱。 " 前綴已刪除。在上面的程式碼中，我們使用此物件填充JSON 對象，然後可用於進一步處理或發送到伺服器。

此程式碼的結果將是表示該物件的JSON 字串：

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

這示範如何使用dataset 屬性存取JavaScript 程式碼中的資料屬性值，讓您可以輕鬆擷取和操作此資訊以用於各種目的。

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