Créer ses propres attributs

C'est l'un des grandes nouveautés de HTML5.
Le développeur peut associer à chaque élément des données en créant ses propres attributs.
Seule condition : le nom de chaque attribut doit commencer par "data-".
C'est pour cette raison que l'on parle des attributs data-*.

Exemple

Faisons un peu de biologie aquatique !

Le code correspondant

Le code HTML (extrait)

... <img src ="../images/bispire.jpg" data-nom = "bispire" data-description ="ver annélidé polychète tubicole" > <button onclick ="info()">Infos sur cette image !</button> ...

Le script

function info()
{
	var image =document.querySelector("img") ; 
	var nom = image.getAttribute("data-nom"); 
	var description =image.getAttribute("data-description"); 
	alert("nom animal : " + nom + " description : " + description); 
	var nom =image.dataset.nom; 
	var description =image.dataset.description ; 
	alert("nom espèce : " + nom + " description espèce : " + description); 
}

La fonction affiche deux fois le nom et la description de l'animal.
Une première fois avec la méthode getAttribute(nomattribut) puis avec l'API dataset. Attention dans cette syntaxe l'attribut doit être débarassé du préfixe "data-" .

L'API dataset n'est pas encore implémentée sur tous les navigateurs.

Les attributs data-* et jQuery Mobile

Le célèbre framework JS et CSS qui permet de créer rapidement la version mobile d'un site exploite systématiquement les attributs data-* !

Pour obtenir un bon rendu du site sur un petit écran il faut associer à chaque boîte un attribut data-role avec une valeur correspondant à la nature de la boîte : page, header, content, footer, listview, etc.
La bibiothèque jQuery Mobile est évoquée dans le tuto "JavaScript & jQuery" dans ce site ! Découvrez jQuery Mobile
Retour menu