Метод attr

Метод attr омогућава да добијете и промените било који атрибут елемента.

Важно је не мешати својства и атрибуте елемената. При креирању DOM стабла, атрибути се преводе у одговарајућа DOM својства елемената. Њихова имена не подударају се увек, као ни њихове вредности. Нека својства такође можда немају одговарајуће атрибуте, они се могу добити и поставити само коришћењем методе prop, на пример својство tagName.

Синтакса

Добијање вредности атрибута:

javascript$(селектор).attr(име атрибута);

Мењање вредности атрибута:

javascript$(селектор).attr(име атрибута, нова вредност);

Мењање вредности више атрибута:

javascript$(селектор).attr({први_атрибут: нова_вредност, други_атрибут: нова_вредност, ...});

Примена функције на сваки елемент у скупу:

javascript$(селектор).attr(име атрибута, function(редни број у скупу, тренутна вредност атрибута));

Пример

У следећем примеру ћемо добити инпут по његовом id и исписати на екран вредност његовог атрибута value:

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

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

Пример

А сада ћемо уписати нову вредност 'www' у исти тај атрибут:

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

javascript$('#test').attr('value', 'www');

HTML код ће изгледати овако:

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

Пример

Хајде да променимо истовремено атрибуте type и value:

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

javascript$('#test').attr({value: 'www', type: 'password'});

HTML код ће изгледати овако:

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

Пример

Хајде да сваком инпуту променимо атрибут value - додамо тренутном value редни број елемента у скупу:

html<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

javascript$('input').attr('value', function(index, value) {
  return value + ' ' + index;
});

HTML код ће изгледати овако:

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

Погледајте такође