obtenir des attributs de données dans du code JavaScript


144

J'ai le html suivant:

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

Est-il possible d'obtenir les attributs commençant par data-et de les utiliser dans le code JavaScript comme le code ci-dessous? Pour l'instant j'obtiens nullcomme résultat.

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"
    });
});

De nos jours (2019), il est également possible d'utiliser la propriété de l'ensemble de données du nœud avec des nœuds SVG (!), Voir la réponse ci - dessous ou l'utiliser avec D3 .
Peter Krauss

Réponses:


173

Vous devez accéder à la datasetpropriété :

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"
  });
});

Résultat:

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

2
Gardez à l'esprit que selon MDN, le standard des ensembles de données ne fonctionnera pas pour Internet Explorer <11. developer.mozilla.org/en-US/docs/Learn/HTML/Howto/... "Pour prendre en charge IE 10 et moins, vous devez accéder des attributs de données avec getAttribute () à la place. "
Djonatan


27

Vous pouvez y accéder en tant que

element.dataset.points

etc. Donc dans ce cas: this.dataset.points


7

Vous pouvez également récupérer les attributs avec la méthode getAttribute () qui retournera la valeur d'un attribut HTML spécifique.

var elem = document.getElementById('the-span');

var typeId = elem.getAttribute('data-typeId');
var type   = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);
<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>


4

si vous ciblez l'attribut de données dans l'élément Html,

document.dataset ne fonctionnera pas

Tu devrais utiliser

document.querySelector("html").dataset.pbUserId

ou

document.getElementsByTagName("html")[0].dataset.pbUserId

1

Les navigateurs modernes acceptent HTML et SVG DOMnode.dataset

Utilisation de la propriété d' ensemble de données de nœud DOM de Javascript pur .

C'est un ancien standard Javascript pour les éléments HTML (depuis Chorme 8 et Firefox 6) mais nouveau pour SVG (depuis l'année 2017 avec Chorme 55.x et Firefox 51) ... Ce n'est pas un problème pour SVG car de nos jours (2019) la part d'utilisation de la version est dominée par les navigateurs modernes.

Les valeurs des valeurs-clés de l'ensemble de données sont des chaînes pures, mais une bonne pratique consiste à adopter le format de chaîne JSON pour les types de données non-chaîne, pour l'analyser JSON.parse().

Utilisation de la propriété de l' ensemble de données dans n'importe quel contexte

Extrait de code pour obtenir et ensemble valeur clé des jeux de données dans des contextes HTML et SVG.

console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )
<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>


0

Vers 2019, en utilisant jquery, il est possible d'y accéder en utilisant $('#DOMId').data('typeId')où se $('#DOMId')trouve le sélecteur jquery pour votre élément span.


-10

Essayez ceci au lieu de votre code:

var type=$("#the-span").attr("data-type");
alert(type);

15
Asker n'a pas mentionné jQuery, ce n'est même pas un bon jQuery pour ce porte-monnaie. Devrait être à la .data('type');place.
Colin DeClue

2
Et en plus de cela, la suggestion d'utiliser ce "au lieu de votre code" est beaucoup trop large; le Asker voudrait garder la mise en place de la gestion des événements, et JSONrésultat, pas alert de l' data-typeattribut.
trincot

1
c'est jquery, pas du javascript pur.
user3130012
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.