Comment accéder et utiliser les attributs de données en JavaScript ?

Accès aux valeurs des attributs de données en JavaScript

En HTML, les attributs de données fournissent un moyen de stocker des informations supplémentaires sur un élément sans affecter son visuel présentation. Pour accéder à ces attributs dans le code JavaScript, vous devez utiliser la propriété dataset.

Considérez l'élément HTML suivant avec divers attributs de données :

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

Pour récupérer les valeurs de ces attributs de données et utilisez-les dans du code JavaScript, vous écririez :

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});</code>

La propriété dataset renvoie un objet qui contient tous les attributs de données d'un élément, où les noms de propriété sont les noms d'attribut d'origine avec le "data- " Préfixe supprimé. Dans le code ci-dessus, nous utilisons cet objet pour remplir un objet JSON qui peut ensuite être utilisé pour un traitement ultérieur ou envoyé à un serveur.

Le résultat de ce code serait une chaîne JSON représentant l'objet :

<code class="json">{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "Luïs"
}</code>

Cela montre comment vous pouvez utiliser la propriété dataset pour accéder aux valeurs des attributs de données dans le code JavaScript, vous permettant d'extraire et de manipuler facilement ces informations à diverses fins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!