Metoda attr

Metoda attr omogoča pridobivanje in spreminjanje katerega koli atributa elementa.

Pomembno je, da ne zamenjujete lastnosti in atributov elementov. Pri ustvarjanju DOM drevesa se atributi pretvorijo v ustrezne lastnosti DOM elementov. Njihova imena in vrednosti se ne ujemajo vedno. Nekatere lastnosti morda tudi nimajo ustreznih atributov, do njih je mogoče dostopati in jih nastaviti le z uporabo metode prop, na primer lastnost tagName.

Sintaksa

Pridobivanje vrednosti atributa:

$(selektor).attr(ime atributa);

Spreminjanje vrednosti atributa:

$(selektor).attr(ime atributa, nova vrednost);

Spreminjanje vrednosti več atributov:

$(selektor).attr({prvi_atribut: nova_vrednost, drugi_atribut: nova_vrednost, ...});

Uporaba funkcije za vsak element v nizu:

$(selektor).attr(ime atributa, function(številka v nizu, trenutna vrednost atributa));

Primer

V naslednjem primeru bomo pridobili vnosno polje po njegovem id in izpisali vrednost njegovega atributa value:

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

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

Primer

Zdaj pa zapišimo novo vrednost 'www' v isti atribut:

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

HTML koda bo tako videti takole:

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

Primer

Spremenimo hkrati atributa type in value:

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

HTML koda bo tako videti takole:

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

Primer

Vsakemu vnosnemu polju spremenimo atribut value - k trenutnemu value dodajmo zaporedno številko elementa v nizu:

<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 koda bo tako videti takole:

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

Glejte tudi

metoda removeAttr,
ki omogoča brisanje atributov elementov
metoda prop,
ki omogoča delo z lastnostmi elementov
metoda val,
ki omogoča pridobivanje in spreminjanje trenutne vrednosti elementa