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

Obtention de valeurs d'attributs de données en JavaScript

En HTML, les attributs de données vous permettent de stocker des données dans des éléments sans affecter leur style ou leur contenu. Lorsque vous travaillez avec JavaScript, vous souhaiterez peut-être accéder et utiliser les valeurs de ces attributs.

Considérez le balisage HTML suivant :

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

Maintenant, disons que vous devez capturer les attributs de données qui commencent par "data-" et extraient la représentation JSON de valeurs spécifiques. Au départ, vous pouvez rencontrer des valeurs nulles ou des erreurs en essayant ceci :

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});</code>

Pour résoudre ce problème, vous devez accéder à la propriété dataset, qui fournit une collection de type carte de tous les attributs de données. Le code JavaScript corrigé serait :

<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>

Cela capturera avec succès les valeurs souhaitées :

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

En utilisant la propriété dataset, vous pouvez accéder et manipuler sans effort les attributs de données en JavaScript, permettant plus de contrôle et de flexibilité dans votre 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!