Apprendre HTML : Attribut de Données data-*

Déclaration

L’attribut HTML data-*, 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, mais que ces données ne sont pas représentées par les attributs standard disponibles (href, src, class, id…).

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 de 20px
• Tous les éléments ayant l’attribut data-skill avec la valeur fireball auront leur couleur de texte red.

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.