Metoden attr

Metoden attr giver mulighed for at hente og ændre enhver attribut for et element.

Det er vigtigt ikke at forveksle egenskaber og attributter for elementer. Ved oprettelse af DOM-træet konverteres attributter til deres tilsvarende DOM-egenskaber for elementer. Deres navne stemmer ikke altid overens, ligesom deres værdier. Nogle egenskaber har muligvis heller ikke tilsvarende attributter, de kan kun hentes og indstilles ved hjælp af metoden prop, for eksempel egenskaben tagName.

Syntaks

Henter værdien af en attribut:

$(selector).attr(attributnavn);

Ændring af værdien af en attribut:

$(selector).attr(attributnavn, ny værdi);

Ændring af værdier for flere attributter:

$(selector).attr({første_attribut: ny_værdi, anden_attribut: ny_værdi, ...});

Anvendelse af en funktion på hvert element i sættet:

$(selector).attr(attributnavn, function(index, nuværende værdi af attribut));

Eksempel

I det følgende eksempel henter vi et inputfelt ved dets id og udskriver værdien af dets attribut value:

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

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

Eksempel

Og nu indsætter vi en ny værdi 'www' i den samme attribut:

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

HTML-koden vil nu se sådan ud:

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

Eksempel

Lad os ændre attributterne type og value samtidigt:

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

HTML-koden vil nu se sådan ud:

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

Eksempel

Lad os ændre attributten value for hvert inputfelt - tilføj elementets indeks i sættet til den nuværende value :

<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 nu se sådan ud:

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

Se også

metoden removeAttr,
som giver mulighed for at slette elementers attributter
metoden prop,
som giver mulighed for at arbejde med elementers egenskaber
metoden val,
som giver mulighed for at hente og ændre elementets nuværende værdi