Comment accéder aux attributs de données dans les éléments JavaScript ?

Obtention d'attributs de données en JavaScript

Lorsque vous traitez des éléments HTML qui ont des attributs de données, tels que le type de données ou les points de données, l'accès leurs valeurs en JavaScript peuvent être un défi. Explorons comment récupérer ces attributs de données dans le code JavaScript.

Accès aux attributs de données à l'aide de dataset

La propriété dataset vous permet d'accéder à tous les attributs de données d'un élément dont les noms commencez par "données-". Pour obtenir la valeur d'un attribut de données spécifique, utilisez simplement le nom de la propriété sans le préfixe "data-". Par exemple, pour obtenir la valeur de l'attribut data-type, vous utiliserez this.dataset.type.

Exemple d'utilisation

Considérez l'élément HTML suivant :

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

Lorsqu'un événement se produit sur cet élément, vous pouvez accéder à ses attributs de données au sein de la fonction de gestionnaire d'événements :

<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: "H. Pauwelyn"
  });
});</code>

Résultat

La variable json contiendra désormais un objet avec les valeurs des attributs de données :

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

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!