Obtenir les valeurs des attributs de données en JavaScript

Les attributs peuvent être considérés comme des propriétés pour les balises HTML. Différents éléments HTML ont des attributs différents, qui sont spécifiés dans la balise d’élément HTML.

Nous allons apprendre comment obtenir les valeurs des attributs de données en JavaScript dans cet article.

La propriété dataset est une propriété en lecture seule de l’élément HTML qui nous aide à lire/écrire les attributs de données. Il donne une carte de chaîne (DOMStringMap) avec l’entrée pour chaque attribut data-*. Le nom de l’attribut doit commencer par data-*.

Voir l’exemple ci-dessous.

• HTML

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

• JavaScript

Pour accéder au nom de l’attribut, supprimez le préfixe data- et convertissez dash-style en camelCase.

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

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

Production:

xyz
18

Dans l’exemple ci-dessus, nous sélectionnons l’élément HTML requis à l’aide de la fonction querySelector(). Nous accédons aux données des attributs en utilisant la propriété dataset et imprimons ces valeurs accédées. Nous affichons les attributs data-user et data-age dans l’exemple ci-dessus.