Metoda attr

Metoda attr umožňuje získat a změnit libovolný atribut elementu.

Je důležité nezaměňovat vlastnosti a atributy elementů. Při vytváření DOM stromu jsou atributy převedeny na odpovídající DOM vlastnosti elementů. Jejich názvy se ne vždy shodují, stejně jako jejich hodnoty. Některé vlastnosti také nemusí mít odpovídající atributy, mohou být získány a nastaveny pouze při použití metody prop, například vlastnost tagName.

Syntaxe

Získání hodnoty atributu:

$(selektor).attr(název atributu);

Změna hodnoty atributu:

$(selektor).attr(název atributu, nová hodnota);

Změna hodnot více atributů:

$(selektor).attr({první_atribut: nová_hodnota, druhý_atribut: nová_hodnota, ...});

Aplikace funkce na každý element v sadě:

$(selektor).attr(název atributu, function(pořadové číslo v sadě, aktuální hodnota atributu));

Příklad

V následujícím příkladu získáme input podle jeho id a vypíšeme hodnotu jeho atributu value:

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

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

Příklad

A nyní zapíšeme novou hodnotu 'www' do stejného atributu:

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

HTML kód bude poté vypadat takto:

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

Příklad

Pojďme současně změnit atributy type a value:

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

HTML kód bude poté vypadat takto:

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

Příklad

Pojďme každému inputu změnit atribut value - přidáme k aktuálnímu value pořadové číslo elementu v sadě:

<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 kód bude poté vypadat takto:

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

Viz také

metoda removeAttr,
která umožňuje mazat atributy elementů
metoda prop,
která umožňuje pracovat s vlastnostmi elementů
metoda val,
která umožňuje získávat a měnit aktuální hodnotu elementu