Détourner un attribut existant pour y glisser une information qui n’a rien à voir avec sa fonction d’origine finit toujours par créer des surprises. Ce préfixe réservé par la spécification HTML offre à la place un espace de stockage officiellement toléré, sans jamais entrer en conflit avec un attribut standard actuel ou futur.
Lecture côté JavaScript
Chaque attribut préfixé devient accessible via la propriété dataset de l’élément, avec une conversion automatique du tiret vers la casse mixte :
<button data-produit-id="482" data-en-stock="true">Ajouter au panier</button>
<script>
const bouton = document.querySelector( 'button' );
console.log( bouton.dataset.produitId ); // "482"
</script>Dans un thème WordPress, ce mécanisme sert souvent à transmettre un identifiant d’article ou un réglage venant de PHP jusqu’à un script JavaScript, sans passer par une requête supplémentaire.
Bon à savoir
- Toutes les valeurs sont lues comme des chaînes de caractères, y compris
data-en-stock="true": une conversion explicite reste nécessaire côté script si un booléen ou un nombre est attendu. - Ces attributs sont aussi ciblables directement en CSS avec un sélecteur d’attribut, par exemple
[data-en-stock="false"] { opacity: 0.5; }. - Contrairement à un identifiant ou une classe, un attribut préfixé n’a aucune incidence sur le style par défaut d’un élément : il ne prend effet que si un sélecteur ou un script vient explicitement le lire.
- La méthode
setAttribute()reste une alternative possible àdatasetpour lire ou écrire ces attributs, notamment quand le nom contient des caractères que la conversion automatique en casse mixte gérerait mal.