HTML5 Data Attribute

Avant, nous avons eu recours généralement à des attributs d'éléments aléatoirement pour le but de stockage de données ou de contenu.

<a href="#" class="modal"> Lien </a>
<img rel="gallery" src="image.jpg" alt="Image">

Avec HTML5 data attribute, nous n'avons plus besoin d'accéder à ces attributs lorsque nous avons besoin de stocker les métadonnées. Au lieu de cela, nous pouvons utiliser des attributs personnalisés.

<a href="#" data-modal>
<img src="image.jpg" data-overlay="gallery">

Un attribut de donné personnalisé est formé de la même manière que l’ensemble des attributs.
La seule condition c’est que le ‘data-‘ doivent être précédées le nom de l'attribut, pour indiquer son rôle.

Options d’utilisation :

L’utilisation des données attributs n’a pas de limite :

HTML5 Data attribute & CSS

Que faire si vous avez besoin d’appliquer un style personnalisé à des liens qui répondent à une certaine condition ? De mettre en évidence certains de vos liens préférés ?

<ul>
   <li><a href="#">Lien 1</a>
   <li><a href="#">Lien 2 préféré</a>
   <li><a href="#">Lien 3</a>
   <li><a href="#">Lien 4 préféré</a>
   <li><a href="#">Lien 5</a>
</ul>

Pour donner un style particulier à nos liens préférés dans la liste, nous pouvons utiliser un attribut personnalisé.

<ul>
   <li><a href="#">Lien 1</a>
   <li><a href="#" data-lien-prefere>Lien 2 préféré</a>
   <li><a href="#">Lien 3</a>
   <li><a href="#" data-lien-prefere>Lien 4 préféré</a>
   <li><a href="#">Lien 5</a>
</ul>

Maintenant, nous pouvons facilement référencés à ces liens dans une feuille de style utilisant un sélecteur d’attribut.

a[data-lien-prefere] {
    color: red;
    font-weight: bold;
}

HTML5 Data attribute & JavaScript

Les attributs personnalisés peuvent également être facilement utilisés dans du JavaScript.
Peut-être vous avez besoin d'un moyen facile pour indiquer des sections de votre site qui devrait servir de superpositions modales.

<a href="#" data-modal data-target="contact">Contact</a>
<div id="contact" style="display: none;">
    <h2>Form Contact</h2>
    ...
</div>

Dans cet exemple, la balise <a></a> utilise deux attributs personnalisés:

• data-modal : précise que l'ancre devrait un modal
• data-target : indique l’id de la section précisée

Le script interroge maintenant les DOM, et capture toutes les éléments data-modal.

$('a[data-modal]').on('click', function(e) {
    e.preventDefault();
    var target = $('#' + $(this).data('target'));
    target.show();
});

Dataset

Dataset Object ou DOMStringMap, renvoie une liste de toutes les données attributs associé à un élément.

<a href="#" data-length="1m20s" data-category="video">Lien</a>

Les deux attributs de données peuvent être accessibles, comme ceci:

var link = document.querySelector('a');
console.log(link.dataset);