Attribut DATA

Rôle

L’attribut data permet de stocker des données personnalisées à la page. Ces données seront ensuite utilisées par Javascript comme dans l’exemple ci-dessous

Testez vous-même cette balise

Utilisez Codepen.

Voici le code Javascript pour cet exemple

Voici le resultat

Cliquez sur le paragraphe ci-dessous : Javascript récupère la valeur du data et l’affiche dans une fenêtre alerte.

Compatibilité

L’attribut data est pris en charge par tous les principaux navigateurs.

Informations

Voici les règles d’utilisation de l’attribut data- :

• • Le nom de l’attribut après le tiret (data-) ne doit pas contenir des lettres majuscules, et doit posséder au moin un caractère, exemple
    <p data-dessert="dessert italien" > ... </p>
  • La valeur de l’attribut est une chaîne de caractère, exemple
    <p data-dessert="dessert italien" > ... </p>

Il est important de connaitre le langage Javascript pour exploiter cet attribut.

Voir les autres attributs globaux

accesskey– class– contenteditable– contextmenu– data-*– dir– draggable– dropzone– hidden– id– lang–spellcheck– style– tabindex– title– translate