Metoden attr

Metoden attr lar deg hente og endre hvilket som helst attributt til et element.

Det er viktig å ikke forveksle egenskaper og attributter til elementer. Ved opprettelse av DOM-treet blir attributter oversatt til deres tilsvarende DOM-egenskaper for elementer. Deres navn er ikke alltid de samme, verken når det gjelder navn eller verdier. Noen egenskaper kan også mangle tilsvarende attributter, de kan bare hentes og settes ved bruk av metoden prop, for eksempel egenskapen tagName.

Syntaks

Hente verdien til et attributt:

$(selector).attr(attributtnavn);

Endre verdien til et attributt:

$(selector).attr(attributtnavn, ny verdi);

Endre verdiene til flere attributter:

$(selector).attr({første_attributt: ny_verdi, andre_attributt: ny_verdi, ...});

Bruke en funksjon på hvert element i settet:

$(selector).attr(attributtnavn, function(indeks i settet, nåværende attributtverdi));

Eksempel

I det følgende eksempelet henter vi en input ved dens id og skriver ut verdien til dens value-attributt:

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

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

Eksempel

La oss nå skrive en ny verdi 'www' til det samme attributtet:

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

HTML-koden vil da se slik ut:

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

Eksempel

La oss endre attributtene type og value samtidig:

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

HTML-koden vil da se slik ut:

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

Eksempel

La oss endre value-attributtet for hver input - legge til indeksen til elementet i settet til den nåværende value-verdien:

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

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

HTML-koden vil da se slik ut:

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

Se også

metoden removeAttr,
som lar deg slette attributter til elementer
metoden prop,
som lar deg arbeide med egenskaper til elementer
metoden val,
som lar deg hente og endre nåværende verdi for et element