Datenattribute in JavaScript-Code abrufen

144

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"
    });
});
H. Pauwelyn
quelle
Heutzutage (2019) ist es auch möglich, die Dataset-Eigenschaft des Knotens mit SVG-Knoten (!) Zu verwenden, siehe Antwort unten oder mit D3 .
Peter Krauss

Antworten:

171

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" }
Josh Crozier
quelle
2
Beachten Sie, dass laut MDN der Datensatzstandard für Internet Explorer <11 nicht funktioniert. Developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… "Um IE 10 und darunter zu unterstützen, müssen Sie darauf zugreifen Datenattribute stattdessen mit getAttribute (). "
Djonatan
101

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

MarkPlewis
quelle
27

Sie können darauf zugreifen als

element.dataset.points

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

Meskobalazs
quelle
7

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>

ii iml0sto1
quelle
4

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
Basheer AL-MOMANI
quelle
1

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>

Peter Krauss
quelle
0

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.

den232
quelle
-11

Versuchen Sie dies anstelle Ihres Codes:

var type=$("#the-span").attr("data-type");
alert(type);
Akash Agrawal
quelle
15
Asker hat jQuery nicht erwähnt, dies ist nicht einmal gut für jQuery. Sollte .data('type');stattdessen sein.
Colin DeClue
2
Darüber hinaus ist der Vorschlag, dies "anstelle Ihres Codes" zu verwenden, viel zu weit gefasst. Der Asker möchte die Einrichtung und das JSONErgebnis der Ereignisbehandlung beibehalten und nicht eines alert der data-typeAttribute.
Trincot
1
Dies ist JQuery, nicht reines Javascript.
user3130012