# Метод 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`,
  который позволяет получать и изменять текущее значение элемента

← →
↑