Metoden attr

Metoden attr låter dig hämta och ändra vilket attribut som helst för ett element.

Det är viktigt att inte blanda ihop egenskaper och attribut för element. När DOM-trädet skapas omvandlas attributen till motsvarande DOM-egenskaper för elementen. Deras namn stämmer inte alltid överens, liksom deras värden. Vissa egenskaper kan också sakna motsvarande attribut, de kan bara hämtas och sättas när metoden prop används, till exempel egenskapen tagName.

Syntax

Hämta värdet på ett attribut:

$(selector).attr(attributnamn);

Ändra värdet på ett attribut:

$(selector).attr(attributnamn, nytt värde);

Ändra värden för flera attribut:

$(selector).attr({första_attributet: nytt_värde, andra_attributet: nytt_värde, ...});

Tillämpa en funktion på varje element i uppsättningen:

$(selector).attr(attributnamn, function(index, nuvarande attributvärde));

Exempel

I nästa exempel hämtar vi en input via dess id och skriver ut värdet på dess attribut value:

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

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

Exempel

Och nu sätter vi ett nytt värde 'www' till samma attribut:

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

HTML-koden kommer att se ut så här:

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

Exempel

Låt oss samtidigt ändra attributen type och value:

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

HTML-koden kommer att se ut så här:

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

Exempel

Låt oss ändra attributet value för varje input - lägg till elementets index i uppsättningen till det nuvarande 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 kommer att se ut så här:

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

Se även

metoden removeAttr,
som låter dig ta bort elementens attribut
metoden prop,
som låter dig arbeta med elementens egenskaper
metoden val,
som låter dig hämta och ändra elementets nuvarande värde