La propriété HTMLElement.dataset
fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.
Le nom d'un attribut de données sur mesure commence par data-
. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-
), point (.
), deux-points (:
), tiret bas (_
). De plus, il ne doit pas contenir des lettres majuscules ASCII (A
à Z
).
Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la DOMStringMap
avec les règles suivantes :
- le préfixe
data-
est enlevé (y compris le tiret) ; - pour tout tiret (
U+002D
) suivi par une lettre minuscule ASCIIa
àz
, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ; - les autres caractères (y compris les autres tirets) ne sont pas modifiés.
La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :
- Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII
a
àz
(avant la transformation) ; - un préfixe
data-
est ajouté ; - toute lettre majuscule ASCII
A
àZ
est transformée en un tiret suivi de la minuscule correspondante ; - les autres caractères ne sont pas modifiés.
La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.
Par exemple, l'attribut nommé data-abc-def
correspond à la clef abcDef
.
Syntaxe
chaîne = element.dataset.nomEnCamelCase; element.dataset.nomEnCamelCase = chaîne;
Exemples
<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
</div>
var el = document.querySelector('#utilisateur');
// el.id == 'utilisateur'
// el.dataset.id === '1234567890'
// el.dataset.utilisateur === 'Monsieur Tartempion'
// el.dataset.dateDeNaissance === ''
el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
// 'unAttributDeDonnees' in el.dataset === false
el.dataset.unAttributDeDonnees = 'mes données';
// 'unAttributDeDonnees' in el.dataset === true
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'HTMLElement.dataset' dans cette spécification. |
Standard évolutif | Pas de changement depuis le dernier instantané (snapshot), HTML 5.1 |
HTML 5.1 La définition de 'HTMLElement.dataset' dans cette spécification. |
Recommendation | Instantané de HTML Living Standard, pas de changement depuis HTML5 |
HTML5 La définition de 'HTMLElement.dataset' dans cette spécification. |
Recommendation | Instantané de HTML Living Standard, définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La classe des attributs globaux HTML data-*.