Как стилизовать элементы DOM с помощью JavaScript

Способы динамического применения стилей к элементам на странице с использованием простого JavaScript

Возможно, вам потребуется динамически применять свойства CSS к элементам DOM.

Какие API-интерфейсы доступны для этого в браузере?

Во-первых, один из самых простых способов - добавить или удалить классы из элемента и использовать стили классов в вашем CSS.

const element = document.querySelector('#my-element')

Вы можете использоватьclassListсвойство элемента и егоadd()иremove()методы:

element.classList.add('myclass')
element.classList.remove('myclass')

Вы также можете напрямую изменить каждое свойство CSS элемента с помощьюstyleсвойство, которое ссылается на элементвстроенные стили.

Например, вы можете изменить цвет элемента, используя

element.style.color = '#fff'

Вы можете изменить границу:

element.style.border = '1px solid black'

Ты виделcolorиborder. Вы можете изменить все свойства CSS, используя camelCase вместо тире, если имя свойства CSS содержит их.

Таблица перевода удобно размещена вэта страница MDN.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: