web-dev-qa-db-fra.com

obtenir des attributs de données en code JavaScript

J'ai 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 je reçois null comme 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"
    });
});
javascripthtmlcustom-data-attribute
98
H. Pauwelyn

Vous devez accéder à la propriété dataset :

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" }
122
Josh Crozier

Comme la propriété dataset n'était pas prise en charge par Internet Explorer jusqu'à la version 11, vous pouvez utiliser plutôt getAttribute():

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute('data-type'));
});

documentation de l'ensemble de données

documentation getAttribute

84
MarkPlewis

Vous pouvez y accéder en tant que

element.dataset.points

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

17
meskobalazs

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
3
Basheer AL-MOMANI

Les navigateurs modernes acceptent HTML et SVG DOMnode.dataset

Utilisation de nœud DOM en pure Javascript dataset ​​propriété .

C'est un ancien standard Javascript pour les éléments HTML (depuis Chorme 8 et Firefox 6) mais nouveau pour SVG (depuis 2017 avec Chorme 55.x et Firefox 51) ... Ce n'est pas un problème pour SVG car à l'heure actuelle (2019), la version sage share est dominée par les navigateurs modernes.

Les valeurs des valeurs-clés du jeu 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 autres que des chaînes, afin de l'analyser avec JSON.parse(). .

Utilisation de la propriété dataset ​​dans n'importe quel contexte

Extrait de code destiné à get ​​et set ​​clé-valeur datasets dans les 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>
1
Peter Krauss