Utiliser les datasets en Javascript

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