在JavaScript 中取得資料屬性值
在HTML 中，資料屬性可讓您在元素內儲存資料而不影響其樣式或內容。使用 JavaScript 時，您可能想要存取和利用這些屬性的值。
考慮以下 HTML 標記：
<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>
現在，假設您需要捕獲資料屬性以「data-」開頭並提取特定值的 JSON 表示形式。最初，您在嘗試執行此操作時可能會遇到空值或錯誤：
<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
var json = JSON.stringify({
id: parseInt(this.typeId),
subject: this.datatype,
points: parseInt(this.points),
user: "H. Pauwelyn"
});
});</code>要解決此問題，您必須存取 dataset 屬性，該屬性提供所有資料屬性的類似地圖的集合。修正後的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>這將成功擷取所需的值：
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }透過利用dataset 屬性，您可以輕鬆存取並操作JavaScript 中的資料屬性，為您的程式碼提供更多控制和靈活性。
以上是如何在 JavaScript 中存取和使用資料屬性值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
