Методот attr

Методот attr овозможува добивање и менување на кој било атрибут на елементот.

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

Синтакса

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

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

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

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

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

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

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

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

Пример

Во следниот пример ќе го добиеме инпутот по неговиот id и ќе ја испечатиме на екранот вредноста на неговиот атрибут value:

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

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

Пример

А сега ќе запишеме нова вредност 'www' во истиот атрибут:

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

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

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

Пример

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

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

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

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

Пример

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

<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 кодот ќе изгледа вака:

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

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

методот removeAttr,
кој овозможува бришење на атрибути на елементи
методот prop,
кој овозможува работа со својства на елементи
методот val,
кој овозможува добивање и менување на тековната вредност на елементот