Метод attr

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

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

Синтаксис

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

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

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

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

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

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

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

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

Пример

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

Пример

Нека на всеки input променим атрибута 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">

Вижте също