Propriété dataset

En langage HTML, il est permis d'ajouter ses propres attributs aux balises, à condition qu'ils commencent par data-, suivi de n'importe quel nom d'attribut. Pour accéder à ces attributs via JavaScript, une propriété spéciale dataset est utilisée.

Syntaxe

javascriptélément.dataset.nom;

Exemple

Lisons la valeur de l'attribut :

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

Résultat de l'exécution du code :

javascript'1000'

Exemple

Modifions la valeur de l'attribut :

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
elem.dataset.cost = '2000';

En conséquence, le code deviendra :

html<div data-cost="2000"></div>

Voir aussi