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

Смотрите также