在 JavaScript 中獲取資料屬性的值

屬性可以被認為是 HTML 標籤的屬性。不同的 HTML 元素具有不同的屬性，這些屬性在 HTML 元素標籤中指定。

我們將在本文中學習如何在 JavaScript 中獲取資料屬性的值。

dataset 屬性是 HTML 元素的只讀屬性，可幫助我們讀取/寫入資料屬性。它提供了一個字串對映 (DOMStringMap)，其中包含每個 data-* 屬性的條目。屬性的名稱應以 data- 開頭。

請參考下面的示例。

• HTML

<div id="user" data-id="1" data-user="xyz" data-age="18">User 1</div>

• JavaScript

要訪問屬性名稱，請刪除字首 data- 並將 dash-style 轉換為 camelCase。

const person = document.querySelector("#user");
// person.dataset.id = 1
// person.dataset.user = "xyz"

console.log(person.dataset.user);
console.log(person.dataset.age);

輸出：

xyz
18

在上面的示例中，我們使用 querySelector() 函式選擇所需的 HTML 元素。我們使用 dataset 屬性訪問屬性的資料並列印這些訪問的值。我們在上面的例子中顯示了 data-user 和 data-age 屬性。