Attribut data-*

Pour commencer, l’attribut data-* vous permet d’ajouter des données personnalisées à des éléments HTML. Ces données peuvent être utilisées pour stocker des informations supplémentaires liées à cet élément.

Pour récupérer la valeur de l’attribut data-* en JavaScript, vous pouvez utiliser la méthode getAttribute("data-*"). Par exemple, supposons que vous ayez un élément div avec un attribut data-name :

<div id="myElement" data-name="John"></div>

Pour récupérer la valeur de l’attribut data-name en JavaScript, vous pouvez faire :

const myElement = document.getElementById("myElement");
const name = myElement.getAttribute("data-name");
console.log(name); // Affiche "John"

Maintenant que vous avez la valeur de l’attribut data-name, vous pouvez l’utiliser dans votre code pour l’afficher ou effectuer d’autres opérations.

const myElement = document.getElementById("myElement");
const name = myElement.getAttribute("data-name");
const message = "Bonjour " + name + " !";
console.log(message); // Affiche "Bonjour John !"

N’oubliez pas de remplacer « myElement » par l’ID de l’élément que vous souhaitez cibler.

En utilisant jQuery, vous pouvez traduire le code JavaScript comme suit :

const name = $("#myElement").data("name");
const message = "Bonjour " + name + " !";
console.log(message); // Affiche "Bonjour John !"

Dans cette traduction, la ligne const myElement = document.getElementById("myElement"); est remplacée par const name = $("#myElement").data("name");.

En utilisant la syntaxe $("#myElement"), nous sélectionnons l’élément avec l’ID « myElement » en utilisant le sélecteur jQuery $(). Ensuite, nous utilisons la méthode .data("name") pour récupérer la valeur de l’attribut « data-name » de l’élément.

Le reste du code reste identique.