Formation HTML | Attribut de Données data-*
L'attribut de données data-* permet de stocker des informations dans des balises HTML, dès lors exploitables en CSS ou JS.
Qu’est-ce qu’un attribut data-* ?
L’attribut HTML data-*
, (plus couramment désigné par son appellation anglophone « data-attribute ») permet de stocker des informations supplémentaires dans les éléments HTML.
Cet attribut est très utile lorsque vous avez besoin d’associer des données spécifiques à un élément HTML, mais que ces données ne sont pas représentées par les attributs standard disponibles (href
, src
, class
, id
…).
Déclaration
Cet attribut permet de définir vos propres attributs personnalisés en utilisant le préfixe data-
suivi d’un nom spécifique que vous choisissez.
<div data-lang="fr"></div>
<div data-index="78"></div>
<div data-active="true"></div>
Vous pouvez ajouter autant d’attributs data-*
que nécessaire à un élément, chacun étant unique et pouvant contenir différentes valeurs.
<div id="character" data-class="mage" data-skill="fireball" data-pv="100" data-atk="15"></div>
Ces informations peuvent être exploitées à des fins de mise en forme via CSS ou pour le bon fonctionnement de l’application, via JavaScript.
Exploitation
Exploitation en CSS
L’attribut data-*
peut être exploité pour styliser des éléments HTML via le sélecteur d’attribut CSS []
.
[data-skill] {
font-size: 20px;
}
[data-skill="fireball"] {
color: red;
}
Dans cet exemple :
- Tous les éléments ayant l’attribut
data-skill
ont une taille de texte de20px
- Tous les éléments ayant l’attribut
data-skill
avec la valeurfireball
auront leur couleur de textered
.
Exploitation en JavaScript
Pour accéder à la valeur d’un attribut data-*
en JavaScript, vous pouvez utiliser la propriété dataset
de l’élément.
<div id="character" data-class="mage" data-skill="fireball" data-pv="100" data-atk="15"></div>
const character = document.getElementById("character");
console.log(character.dataset.skill); // Affiche "fireball"
Ici, nous utilisons la propriété dataset
de l’élément pour accéder aux attributs data-*
. En utilisant le nom de l’attribut sans le préfixe data-
, nous pouvons accéder à sa valeur.
En résumé, l’attribut HTML “data-*” est un moyen pratique de stocker des informations supplémentaires dans les éléments HTML. Il vous permet de créer vos propres attributs personnalisés et de manipuler ces données à l’aide de JavaScript ou de les cibler avec des sélecteurs CSS.
Utilisez cet attribut lorsque vous avez besoin de stocker des données spécifiques à un élément HTML, mais qui ne sont pas représentées par les attributs standard disponibles.