911 Stimmen

jQuery: Data-Attribut-Wert lesen und ändern

Tutorial von Stefan Trost | Letztes Update am 05.05.2022 | Erstellt am 29.05.2015

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:

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().

AntwortenPositivNegativ

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.