Werte von Datenattributen in JavaScript abrufen

Attribute können als Eigenschaften für HTML-Tags betrachtet werden. Unterschiedliche HTML-Elemente haben unterschiedliche Attribute, die innerhalb des HTML-Element-Tags angegeben werden.

In diesem Artikel erfahren Sie, wie Sie Werte von Datenattributen in JavaScript abrufen.

Die Eigenschaft dataset ist eine schreibgeschützte Eigenschaft des HTML-Elements, die uns beim Lesen/Schreiben von Datenattributen hilft. Es liefert eine String-Map (DOMStringMap) mit dem Eintrag für jedes data-*-Attribut. Der Name des Attributs sollte mit data- beginnen.

Siehe das Beispiel unten.

• HTML

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

• JavaScript

Um auf den Attributnamen zuzugreifen, entfernen Sie das Präfix data- und konvertieren Sie dash-style in camelCase.

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

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

Ausgabe:

xyz
18

Im obigen Beispiel wählen wir mit der Funktion querySelector() das gewünschte HTML-Element aus. Wir greifen über die Eigenschaft dataset auf die Daten der Attribute zu und geben diese aufgerufenen Werte aus. Im obigen Beispiel zeigen wir die Attribute data-user und data-age an.