So greifen Sie in JavaScript auf Datenattribute zu: Warum funktioniert „this.typeId' nicht und wie verwendet man stattdessen „dataset'?

Erhalten von Datenattributen in JavaScript

In HTML-Elementen bieten Datenattribute eine praktische Möglichkeit, zusätzliche Informationen zu speichern. Der Zugriff auf diese Attribute in JavaScript kann jedoch schwierig sein. Lassen Sie uns ein bestimmtes Problem untersuchen und seine Lösung erkunden.

Die Herausforderung

Betrachten Sie den folgenden HTML-Code:

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

In JavaScript ist es unser Ziel, diese Datenattribute abzurufen und verwenden Sie sie in einem JSON-Objekt, wie unten gezeigt:

<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>

Der Versuch, mit this.typeId, this.datatype und this.points auf die Datenattribute zuzugreifen, ergibt jedoch null.

Die Lösung

Um auf Datenattribute in JavaScript zuzugreifen, müssen wir die Dataset-Eigenschaft verwenden. Hier ist der geänderte Code, der unser Ziel erreicht:

<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>

Das resultierende JSON-Objekt würde die gewünschten Daten enthalten:

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

Durch die Nutzung der Dataset-Eigenschaft können wir mühelos Datenattribute abrufen JavaScript, das es uns ermöglicht, ihre Werte in unserem Code zu verwenden.

Das obige ist der detaillierte Inhalt vonSo greifen Sie in JavaScript auf Datenattribute zu: Warum funktioniert „this.typeId' nicht und wie verwendet man stattdessen „dataset'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!