Wie greifen Sie auf Datenattribute in JavaScript-Elementen zu?

Datenattribute in JavaScript abrufen

Beim Umgang mit HTML-Elementen, die über Datenattribute wie Datentyp oder Datenpunkte verfügen, wird darauf zugegriffen Ihre Werte in JavaScript können eine Herausforderung sein. Lassen Sie uns untersuchen, wie Sie diese Datenattribute in JavaScript-Code abrufen.

Zugriff auf Datenattribute mithilfe von dataset

Mit der dataset-Eigenschaft können Sie auf alle Datenattribute eines Elements zugreifen, dessen Namen Beginnen Sie mit „data-“. Um den Wert eines bestimmten Datenattributs zu erhalten, verwenden Sie einfach den Eigenschaftsnamen ohne das Präfix „data-“. Um beispielsweise den Wert des Datentypattributs zu erhalten, würden Sie this.dataset.type verwenden.

Beispielverwendung

Betrachten Sie das folgende HTML-Element:

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

Wenn ein Ereignis für dieses Element auftritt, können Sie innerhalb der Ereignishandlerfunktion auf seine Datenattribute zugreifen:

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

Ergebnis

Die JSON-Variable enthält nun ein Objekt mit den Werten der Datenattribute:

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

Das obige ist der detaillierte Inhalt vonWie greifen Sie auf Datenattribute in JavaScript-Elementen zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!