jQuery: Data-Attribut-Wert lesen und ändern

In diesem Tutorial möchte ich euch zeigen, wie ihr die Data-Attribut-Werte eines beliebigen HTML-Elements mit der Hilfe von JavaScript und jQuery auslesen und setzen könnt.

Das Tutorial habe ich eingeteilt in die folgenden Abschnitte:

• Data-Attribut-Werte lesen
• Data-Attribut-Werte schreiben
• Beliebige Attribute lesen und schreiben

Als Beispiel möchten wir folgendes HTML verwenden:

<div id="mydiv" data-a="1" data-b="2"></div>

Hier haben wir ein DIV-Element mit der ID "mydiv" und zwei Data-Attributen. Und zwar das Attribut "data-a" mit dem Wert "1" und das Attribut "data-b" mit dem Wert "2".

Data-Attribut-Werte lesen

jQuery hilft uns beim Lesen von Data-Attributen mit der Methode .data(). Schauen wir uns dazu ein Beispiel an:

var a = $("#mydiv").data("a");
var b = $("#mydiv").data("b");

var c = a + b;

alert(c);

Hier lesen wir die beiden Data-Attribute von unserem DIV-Element aus, addieren die Werte und zeigen eine Meldung über das Ergebnis.

Konkret benutzen wir den Selektor $("#mydiv") um unser DIV-Element auszuwählen. Anschließend benutzen wir .data("a") und .data("b") um die Werte der beiden Attribute auszulesen. Wir speichern diese in den Variablen a und b, speichern die Summe in der Variable c und geben c über alert() aus.

Wie man sieht, ist es nicht nötig "data-a" oder "data-b" zu schreiben, wenn wir .data() benutzen. Es ist ausreichend direkt "a" und "b" zu schreiben, um auf die Werte zugreifen zu können.

Data-Attribut-Werte schreiben

Wenn wir .data() einen zweiten Parameter übergeben, wird dieser Parameter in das betreffende Data-Attribut geschrieben. Auch dazu ein kleines Beispiel:

var a_neu = 10;

$("#mydiv").data("a", a_neu);
$("#mydiv").data("b", "test");

Wieder benutzen wir den Selektor $("#mydiv") um unser DIV auszuwählen. Anschließend setzten wir das Data-Attribut "a" auf eine zuvor definierte Variable und "b" auf einen direkt angegebenen String. Wir erhalten damit also das folgende Ergebnis:

<div id="mydiv" data-a="10" data-b="test"></div>

Beliebige Attribute lesen und schreiben

Als Einordnung und kleiner Exkurs sollte an dieser Stelle nicht unerwähnt bleiben, wie wir beliebige sonstige Attribute lesen und schreiben können, also Attribute, die nicht mit dem "data-"-Präfix beginnen.

Verwenden können wir dafür die Methode .attr(). Die Funktionsweise ist vergleichbar mit der von .data():

// lesen
var id = $("#mydiv").attr("id");
var a  = $("#mydiv").attr("data-a");

// schreiben
$("#mydiv").attr("id", "new_id");
$("#mydiv").attr("data-a", 10);

Hier lesen wir den Wert der ID unseres DIVs aus und ändern diesen Wert später auf "new_id". Wenn wir mit der Hilfe von .attr() auf Data-Attribute zugreifen möchten, müssen wir nun den vollständigen Namen verwenden, in unserem Beispiel also "data-a" statt nur "a" wie bei .data().