HTML permet d'associer des données directement dans un élément HTML à l'aide des attributs data-*.
Nous pouvons donc stocker et manipuler de l’information directement.
Voici les 7 selecteurs disponibles.
[data-value] {
/* Attribute exists */
}
[data-value="foo"] {
/* Attribute has this exact value */
}
[data-value*="foo"] {
/* Attribute value contains this value somewhere in it */
}
[data-value~="foo"] {
/* Attribute has this value in a space-separated list somewhere */
}
[data-value^="foo"] {
/* Attribute value starts with this */
}
[data-value=|"foo"] {
/* Attribute value has this in a dash-separated list somewhere */
}
[data-value$="foo"] {
/* Attribute value ends with this */
}
Voici un exemple.
+ infos
Manipulation en JS
La propriété
HTMLElement.dataset en lecture seule permet l'accès, à la fois en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément.chaîne = element.dataset.nomEnCamelCase; element.dataset.nomEnCamelCase = chaîne;Notre donc, les deux façons d'obtenir les valeurs stockées dans prof1
<li id="first" data-nom-prenom="denis dupont">prof1</li>
console.log(` ${document.getElementById("first").getAttribute("data-nom-prenom")}`) ;
console.log(` ${document.getElementById("first").dataset.nomPrenom}`) ;