Metodi attr

Metodi attr mahdollistaa minkä tahansa elementin attribuutin hakemisen ja muuttamisen.

On tärkeää olla sekoittamatta elementtien ominaisuuksia ja attribuutteja. Kun DOM-puuta luodaan, attribuutit muunnetaan vastaaviksi elementtien DOM-ominaisuuksiksi. Niiden nimet eivät aina vastaa toisiaan, kuten eivät myöskään niiden arvot. Joidenkin ominaisuuksien kohdalla ei ehkä ole olemassa vastaavia attribuutteja; ne voidaan hakea ja asettaa vain käyttämällä metodia prop, esimerkiksi ominaisuus tagName.

Syntaksi

Attribuutin arvon hakeminen:

$(selektori).attr(attribuutin nimi);

Attribuutin arvon muuttaminen:

$(selektori).attr(attribuutin nimi, uusi arvo);

Usean attribuutin arvojen muuttaminen:

$(selektori).attr({ensimmäinen_attribuutti: uusi_arvo, toinen_attribuutti: uusi_arvo, ...});

Funktion soveltaminen jokaiseen elementtiin joukossa:

$(selektori).attr(attribuutin nimi, function(järjestysnumero joukossa, attribuutin nykyinen arvo));

Esimerkki

Seuraavassa esimerkissä haamme input-elementin sen id:n perusteella ja tulostamme sen value-attribuutin arvon näytölle:

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

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

Esimerkki

Kirjoitetaan nyt uusi arvo 'www' samaan attribuuttiin:

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

HTML-koodi näyttää nyt tältä:

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

Esimerkki

Muutetaan samanaikaisesti attribuutit type ja value:

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

HTML-koodi näyttää nyt tältä:

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

Esimerkki

Muutetaan jokaisen input-elementin value-attribuuttia - lisätään nykyiseen value:en elementin järjestysnumero joukossa:

<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-koodi näyttää nyt tältä:

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

Katso myös

metodi removeAttr,
joka mahdollistaa elementtien attribuuttien poistamisen
metodi prop,
joka mahdollistaa elementtien ominaisuuksien käsittelyn
metodi val,
joka mahdollistaa elementin nykyisen arvon hakemisen ja muuttamisen