Die Methode attr

Die Methode attr ermöglicht es, jedes Attribut eines Elements abzurufen und zu ändern.

Es ist wichtig, Eigenschaften (Properties) und Attribute von Elementen nicht zu verwechseln. Bei der Erstellung des DOM-Baums werden Attribute in die entsprechenden DOM-Eigenschaften der Elemente umgewandelt. Ihre Namen stimmen nicht immer überein, genauso wie ihre Werte. Einige Eigenschaften haben möglicherweise auch keine entsprechenden Attribute; sie können nur abgerufen und gesetzt werden, wenn die Methode prop verwendet wird, zum Beispiel die Eigenschaft tagName.

Syntax

Abrufen des Attributwerts:

$(Selektor).attr(Attributname);

Ändern des Attributwerts:

$(Selektor).attr(Attributname, neuer Wert);

Ändern der Werte mehrerer Attribute:

$(Selektor).attr({erstes_Attribut: neuer_Wert, zweites_Attribut: neuer_Wert, ...});

Anwenden einer Funktion auf jedes Element im Set:

$(Selektor).attr(Attributname, function(Index im Set, aktueller Attributwert));

Beispiel

Im folgenden Beispiel holen wir uns ein Input über seine id und geben den Wert seines value-Attributs aus:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

Beispiel

Und jetzt schreiben wir einen neuen Wert 'www' in dasselbe Attribut:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

Der HTML-Code sieht dann so aus:

<input type="text" value="www" id="test">

Beispiel

Lassen Sie uns gleichzeitig die Attribute type und value ändern:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

Der HTML-Code sieht dann so aus:

<input type="password" value="www" id="test">

Beispiel

Lassen Sie uns für jedes Input-Feld das value-Attribut ändern - indem wir zum aktuellen value die Indexnummer des Elements im Set hinzufügen:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

Der HTML-Code sieht dann so aus:

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Siehe auch

die Methode removeAttr,
die das Löschen von Elementattributen ermöglicht
die Methode prop,
die das Arbeiten mit Elementeigenschaften ermöglicht
die Methode val,
die das Abrufen und Ändern des aktuellen Werts eines Elements ermöglicht