Maison  >  Article  >  interface Web  >  Comment accéder et utiliser les attributs de données dans le code JavaScript ?

Comment accéder et utiliser les attributs de données dans le code JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-25 16:43:02508parcourir

How to Access and Use Data Attributes in JavaScript Code?

Récupération des attributs de données dans le code JavaScript

Pour accéder aux attributs commençant par "data-" dans le code JavaScript pour l'élément HTML fourni, vous' Vous devrez utiliser la propriété dataset, comme démontré dans le code ci-dessous :

<code class="js">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid), // Accessing data-typedId attribute
    subject: this.dataset.type, // Accessing data-type attribute
    points: parseInt(this.dataset.points), // Accessing data-points attribute
    user: "H. Pauwelyn"
  });
});</code>

Après avoir exécuté ce code, la variable json contiendra un objet avec les valeurs suivantes :

{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "H. Pauwelyn"
}

Cette technique vous permet d'accéder et d'utiliser facilement les attributs de données dans le code JavaScript, simplifiant ainsi la gestion et la manipulation des attributs personnalisés dans votre balisage HTML.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn