<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
$('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);
Enregistrer un commentaire