HTML5 et les attributs personnalisés

Explications des attributs personnalisés

Il est souvent nécessaire d’utiliser des attributs personnalisés sur des éléments HTML et de les utiliser en Javascript. Pour cela, il y a bien sûr une solution simple proposée par le HTML5. Il s’agit des attributs data-*.

Voici un exemple :

<ul>
  <li id="produit_1" data-element-ref="1240512" data-nombre="2">
    Premier produit
  </li>
  <li id="produit_2" data-element-ref="1240515" data-nombre="0">
    Deuxième produit
  </li>
</ul>

Et voici comment utiliser ces attributs en Javascript :

var element = document.getElementById('produit_1');

//Récupérer une valeur :
var nombre = element.dataset.nombre; //2
var ref    = element.dataset.elementRef; //1240512

//Modifier une valeur
element.dataset.nombre = 5;

Dans cet exemple, on utilise les attributs data-element-ref et data-nombre pour stocker respectivement la référence et le nombre restant d’un produit correspondant.
Ces attributs, comme leur nom l’indique, sont là pour enrichir un élément avec des données. Dans l’absolu, ils ne doivent pas être utilisées en CSS. Ils deviennent vite indispensable pour la réalisation de web application.

Démonstration

Cliquez sur un produit pour avoir des infos.

Le code Javascript (avec jQuery) :

(function($){
    $('.produit').bind('click', function(){
        var self = $(this)[0];

        $('#infos').html('Nom : ' + $(this).text()
            + '<br />Prix : ' + self.dataset.price
            + '<br />Nombre restant : ' + self.dataset.nombre
            + '<br />Référence : ' + self.dataset.elementRef );
       
        return false;
    });
})(jQuery);

Conclusion

Encore une fois le HTML5 vient ajouter des fonctionnalités qui vont simplifier la création des applications web. L’avantage de celle-ci est que si le navigateur ne gère pas en javascript l’utilisation de dataset, on peut tout de même utiliser ces attributs avec les méthodes setAttribute et getAttribute (ou encore la fonction attr de la bibliothèque jQuery) afin de garder un document valide en HTML5 (au lieu d’utiliser des attributs quelconques).

Laisser une réponse