Поменять значение атрибута JS

В данном уроке мы разберем способы поменять значение атибута тега с помощью JavaScript. Пусть для примера у нас есть следующий инпут:

<input value="text">

Давайте поменяем значение атрибута value инпута. Для начала получим ссылку на этот инпут с помощью метода querySelector:

let input = document.querySelector('input');

А теперь разберем способы изменения нашего атрибута.

Через свойство

Самый простой вариант поменять значение атрибута - это изменение свойства:

input.value = 'xxx';

Через метод

Можно также поменять значение атрибута через метод setAttribute:

input.setAttribute('value', 'xxx');

Атрибут class

Атрибут class является исключением и к нему нужно обращаться через className:

input.className = 'xxx';

Изменение CSS классов

С помощью объекта classList можно добавлять и удалять отдельные CSS классы в атритбут class, не затрагивая остальные классы:

input.classList.add('xxx');

Атрибуты без значений

В HTML существуют атрибуты, у которых нет значений. Эти атрибуты либо есть, либо нет. Примером может служить атрибут disabled:

<input disabled>

Для включения такого атрибута в соответствующее свойство нужно записывать булево значение. К примеру, установим наш атрибут:

input.disabled = true;

А теперь уберем наш атрибут:

input.disabled = false;