Поменять значение атрибута 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;
