Utiliser les datasets en Javascript
Par Nouvelle-Techno.fr le 1 mai 2020 - Catégories : HTML Javascript Tutoriel datasets
Lire l'article sur le site d'origine
Depuis l'apparition de HTML5, il est possible de stocker des informations à l'intérieur des balises html.
Ce stockage, invisible par le navigateur et par les moteurs de recherche, permet de stocker toutes les informations que nous souhaitons dans toutes les balises HTML de notre page.
Le HTML
Dans la vidéo ci-dessus, nous prenons l'exemple de balises "a" dans lesquelles nous allons stocker une information de titre et de couleur qui seront ensuite récupérées en javascript pour aller affecter des valeurs ou classes à des éléments d'une modale.
La structure de ces balises est tout à fait classique comme dans l'exemple ci-dessous.
<a href="https://facebook.com/nouvelletechnofr" class="btn btn-primary">
<i class="la la-facebook"></i> Ouvrir
</a>
Pour stocker des informations dans nos balises, nous utiliserons l'attribut data- qui sera suivi du mot de notre choix, c'est totalement libre. Nous utiliserons donc data-titre et data-couleur comme ci-dessous
<a href="https://facebook.com/nouvelletechnofr" class="btn btn-primary" data-titre="Page Facebook" data-couleur="primary">
<i class="la la-facebook"></i> Ouvrir
</a>
Accès en javascript
Pour accéder aux données en javascript, vous pourrez utiliser le code ci-dessous
let balise = document.querySelector("a")
// On va lire les attributs data
let titre = balise.dataset.titre
let couleur = balise.dataset.couleur
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
Visualisez les fichiers de cet article sur GitHub