Manuel de référence HTML

Complexe des balises HTML

HTML data-*Attribut

data-* Les attributs globaux sont une catégorie d'attributs appelés attributs de données personnalisés, qui nous permettent d'insérer des attributs de données personnalisés dans tous les éléments HTML et de faire des échanges de données spécifiques entre HTML et les scripts (généralement JavaScript).

Attributs globaux HTML

Exemple en ligne

Utilisez data-* Attributs pour intégrer des données personnalisées :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The "　+　animal.innerHTML　+　" est un"　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>Espèce</h1>
<p>Cliquez sur une espèce pour voir son type : </p>
<ul>
　　<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Hibou</li>
　　<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Saumon</li>　　
　　<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Tous les navigateurs populaires prennent en charge data-* attribut.

Définition et utilisation

data-* L'attribut est utilisé pour stocker des données personnalisées utilisées après l'application de la page.

data-* L'attribut peut être intégré dans tous les éléments HTML.

Les données personnalisées permettent à la page d'avoir une meilleure expérience d'interaction (sans utiliser Ajax ou aller sur le serveur pour chercher des données).

data-* L'attribut personnalisé se compose des deux parties suivantes :

Le nom de l'attribut ne doit pas contenir de lettres majuscules, dans data- doit au moins comporter un caractère.
Cette propriété peut être n'importe quelle chaîne de caractères

Remarque : Préfixe de l'attribut personnalisé "data-" sera ignoré par le client.

HTML 4.01 et HTML5différences entre

data-* L'attribut est HTML5 ajouté.

Syntaxe

<element data-*="somevalue">

Valeur de l'attribut

Valeur	Description
somevalue	Valeur de l'attribut spécifié (une chaîne de caractères)

Attributs globaux HTML

HTML: <template> balise