Comment utiliser les attributs data-* en HTML5

L'attribut data en HTML5 est principalement utilisé pour stocker des données privées personnalisées dans la page, dans le but de créer une meilleure expérience utilisateur

De nombreux nouveaux attributs ont été ajoutés au HTML Attributs, aujourd'hui nous allons présenter les attributs data-* en HTML5, j'espère que cela sera utile à tout le monde.

[Cours recommandés : Cours HTML5 ]

data-* La signification de l'attribut data-*

data-* attribut est utilisé pour stocker les données personnalisées privées de la page ou de l'application. correspondent aux données personnalisées sur tous les éléments HTML, qui stockent des données qui peuvent être exploitées par JavaScript pour créer une meilleure expérience utilisateur.

L'attribut data-* contient deux parties :

Nom de l'attribut : Le nom de l'attribut ne peut contenir aucune lettre majuscule et il doit y avoir un caractère après le préfixe "data-", qui ne peut pas être vide. .

Valeur de l'attribut : la valeur de l'attribut peut être n'importe quelle chaîne.

<element data-*="somevalue">

Exemple

data-animal-type="动物类"

Comment utiliser les attributs data-*

Puisque les attributs de données personnalisés sont valides HTML 5, afin qu'ils puissent être utilisés dans n'importe quel navigateur prenant en charge les types de documents HTML 5 :

Nous pouvons définir la hauteur ou l'opacité initiale des éléments stockés dans les animations JavaScript qui peuvent être nécessaires, ou définies dans Flash chargé via les paramètres JavaScript pour votre des vidéos ainsi que le stockage de données de balises d'analyse de réseau personnalisées et plus encore.

Exemple :

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  
小猫咪
  
苹果
  

Rendu :

Avant de cliquer

Après avoir cliqué

Remarque

Bien que les attributs de données soient flexibles, les attributs de données ne conviennent pas à tous les problèmes. Par exemple, il existe des méthodes qui. sont plus adaptés au stockage de données. S'il existe un attribut ou un élément existant, l'attribut data ne doit pas être utilisé. Par exemple, les données de date/heure doivent être affichées de manière sémantique plutôt que stockées dans des attributs de données personnalisés, et les attributs de données spécifiques ne doivent pas être liés à un CSS stylisé. De plus, à mesure que les attributs de données sont utilisés de plus en plus largement, les conflits dans les conventions de dénomination peuvent devenir de plus en plus importants. Par conséquent, lors de la dénomination, vous devez faire attention à éviter toute confusion avec les noms de plug-ins ou d'attributs publics

Résumé : Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à tous ceux qui apprennent le HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!