Az attr metódus

Az attr metódus lehetővé teszi bármely elem attribútumának lekérését és módosítását.

Fontos, hogy ne keverjük össze az elemek tulajdonságait és attribútumait. A DOM fa létrehozásakor az attribútumok az elemek megfelelő DOM tulajdonságaivá alakulnak át. Az elnevezéseik és értékeik nem mindig egyeznek meg. Egyes tulajdonságoknak nem is lehet megfelelő attribútumuk, csak a prop metódus használatával lehet őket lekérni és beállítani, például a tagName tulajdonság.

Szintaxis

Attribútum értékének lekérése:

$(selector).attr(attribútum neve);

Attribútum értékének módosítása:

$(selector).attr(attribútum neve, új érték);

Több attribútum értékének módosítása:

$(selector).attr({első_attribútum: új_érték, második_attribútum: új_érték, ...});

Függvény alkalmazása minden elemre a halmazban:

$(selector).attr(attribútum neve, function(sorszám a halmazban, attribútum aktuális értéke));

Példa

A következő példában egy input mezőt kapunk meg a id alapján, és kiírjuk a value attribútumának értékét:

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

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

Példa

Most pedig írjunk egy új 'www' értéket ebbe az attribútumba:

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

Az HTML kód így fog kinézni:

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

Példa

Változtassuk meg egyszerre a type és a value attribútumokat:

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

Az HTML kód így fog kinézni:

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

Példa

Változtassuk meg minden input mező value attribútumát - adjuk hozzá az aktuális value értékhez az elem sorszámát a halmazban:

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

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

Az HTML kód így fog kinézni:

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

Lásd még

a removeAttr metódus,
amely lehetővé teszi elemek attribútumainak eltávolítását
a prop metódus,
amely lehetővé teszi elemek tulajdonságaival való munkát
a val metódus,
amely lehetővé teszi az elem aktuális értékének lekérését és módosítását