LearnJS

setAttribute() в JavaScript

Добавление и изменение атрибута

Метод setAttribute() добавляет атрибут, если его нет, или заменяет значение существующего атрибута.

<a class="profile-link" href="/profile">Профиль</a>
const profileLink = document.querySelector('.profile-link');

profileLink.setAttribute('href', '/settings');
profileLink.setAttribute('title', 'Открыть настройки');

Ссылка начнёт вести на страницу настроек, а атрибут title будет добавлен. Синтаксис метода: element.setAttribute(‘имя’, ‘значение’).

Значение становится строкой

Второй аргумент setAttribute() преобразуется в строку. Например, productButton.setAttribute(‘data-product-id’, 42) создаст атрибут со значением “42”.

Булевы атрибуты

У булевых атрибутов важно само наличие атрибута. К ним относятся disabled, checked и required.

const saveButton = document.querySelector('.save-button');

saveButton.setAttribute('disabled', '');

Кнопка станет недоступной.

saveButton.setAttribute(‘disabled’, false) тоже отключит кнопку: значение станет строкой “false”, но атрибут всё равно существует. Чтобы включить кнопку, удалите атрибут или задайте saveButton.disabled = false.

Атрибут или свойство

setAttribute() изменяет HTML-атрибут. Для текущего состояния полей формы используйте DOM-свойства: input.value, checkbox.checked и button.disabled. Например, после ввода пользователя setAttribute(‘value’, ‘Анна’) не является надёжным способом изменить текущее значение поля.

Для чтения значения атрибута используйте getAttribute(), а для удаления - removeAttribute(). О работе с data-* читайте в уроке «Изменение атрибутов».

Итого

setAttribute() добавляет или изменяет HTML-атрибут, а его значение сохраняется как строка. Для булевых атрибутов важно наличие, а текущее состояние элементов формы меняйте через их свойства.