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

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

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

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

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

Вы можете использовать Список классов свойство элемента и его добавить() и удалить() методы:

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

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

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

element.style.color = '#fff'

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

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

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

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

Оригинал: “https://flaviocopes.com/javascript-style-dom/”