Datenattribute in JavaScript-Code abrufen

Ich habe nächstes HTML:

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

Ist es möglich, die Attribute, die mit beginnen data-, abzurufen und im JavaScript- Code wie den folgenden Code zu verwenden? Vorerst bekomme ich nullals Ergebnis.

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

Sie müssen auf die datasetEigenschaft zugreifen :

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

Ergebnis:

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

Da die datasetEigenschaft von Internet Explorer bis Version 11 nicht unterstützt wurde, möchten Sie möglicherweise getAttribute()stattdessen Folgendes verwenden :

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

Datensatzdokumentation

getAttribute-Dokumentation

Sie können darauf zugreifen als

element.dataset.points

usw. Also in diesem Fall: this.dataset.points

Sie können die Attribute auch mit der Methode getAttribute () abrufen , die den Wert eines bestimmten HTML-Attributs zurückgibt .

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>

Wenn Sie auf ein Datenattribut im HTML-Element abzielen,

document.dataset wird nicht funktionieren

du solltest benutzen

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

oder

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

Moderne Browser akzeptieren HTML und SVG DOMnode.dataset

Verwenden der DOM-Node- Dataset- Eigenschaft von reinem Javascript .

Es ist ein alter Javascript-Standard für HTML-Elemente (seit Chorme 8 und Firefox 6), aber neu für SVG (seit 2017 mit Chorme 55.x und Firefox 51) ... Es ist kein Problem für SVG, da heutzutage (2019) Der Nutzungsanteil der Version wird von modernen Browsern dominiert.

Die Werte der Schlüsselwerte des Datasets sind reine Zeichenfolgen. Es empfiehlt sich jedoch, das JSON-Zeichenfolgenformat für Datentypen ohne Zeichenfolge zu verwenden, um es zu analysieren JSON.parse().

Verwenden der Dataset- Eigenschaft in einem beliebigen Kontext

Code-Snippet zum Abrufen und Festlegen von Schlüsselwert- Datasets in HTML- und SVG-Kontexten.

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>

Circa 2019 mit Jquery, kann dies über die zugegriffen werden soll , $('#DOMId').data('typeId')wo $('#DOMId')der jQuery - Selektor für die span - Element ist.

Versuchen Sie dies anstelle Ihres Codes:

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