Attribut data-* du DOM HTML

Définition et utilisation

data-* Les attributs sont utilisés pour stocker des données personnalisées privées du site ou de l'application.

data-* Les attributs nous permettent d'insérer des attributs personnalisés data sur tous les éléments HTML.

Les données stockées (personnalisées) peuvent être utilisées dans le JavaScript du site pour créer une meilleure expérience utilisateur (sans appel Ajax ou requête de base de données côté serveur).

data-* L'attribut se compose de deux parties :

  • Le nom de l'attribut ne doit pas contenir de lettres majuscules et doit avoir au moins un caractère après le préfixe "data-"
  • La valeur de l'attribut peut être une chaîne de caractères arbitraire

Attention : l'utilisateur agent ignore complètement les attributs personnalisés précédés de "data-".

Veuillez également consulter :

Tutoriel HTML :Attributs HTML

Manuel de référence du DOM HTML :Méthode getAttribute() du DOM HTML

Exemple

Intégrez des données personnalisées en utilisant les attributs data-* :

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li>
  <li data-animal-type="蜘蛛">蝇虎</li>
</ul>

Essayez-le vous-même

Syntaxe

<element data-*="somevalue">

Valeur de l'attribut

Valeur Description
somevalue Définir la valeur de l'attribut (sous forme de chaîne).

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6