Методот 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">

Погледнете ги и