在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中文網其他相關文章！
