obtenir des attributs de données dans du code JavaScript

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

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

Étant donné que la datasetpropriété n'était pas prise en charge par Internet Explorer jusqu'à la version 11, vous souhaiterez peut-être utiliser à la getAttribute()place:

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

Documentation de l'ensemble de données

documentation getAttribute

Vous pouvez y accéder en tant que

element.dataset.points

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

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>

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

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>

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.

Essayez ceci au lieu de votre code:

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