Метод attr

Методът attr позволява получаване и промяна на всеки атрибут на елемент.

Важно е да не се бъркат свойствата и атрибутите на елементите. При създаване на DOM дървото атрибутите се преобразуват в съответните им DOM свойства на елементите. Техните имена не винаги съвпадат, както и техните стойности. Някои свойства също може да нямат съответстващи им атрибути, те могат да бъдат получени и зададени само при използване на метода prop, например свойството tagName.

Синтаксис

Получаване на стойност на атрибут:

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

Промяна на стойност на атрибут:

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

Промяна на стойностите на няколко атрибута:

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

Прилагане на функция към всеки елемент в набора:

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

Пример

В следващия пример ще получим input по неговия 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">

Пример

Нека на всеки input променим атрибута 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,
който позволява получаване и промяна на текущата стойност на елемент