как манипулировать стилями с помощью cssom в javascript

CSS Object Model (CSSOM) предоставляет возможность манипулировать стилями CSS в документе с помощью JavaScript.

Для манипуляции стилями с помощью CSSOM можно использовать несколько методов и свойств, приведу некоторые из них:

document.styleSheets

Это свойство предоставляет доступ к стилям, определенным в таблицах стилей на странице. Вы можете изменять cssRules или rules в этих таблицах стилей.

element.style

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

getComputedStyle()

Этот метод позволяет получить вычисленные стили элемента, включая значения, унаследованные из таблиц стилей и инлайн стилей.

Примеры манипуляции стилями с помощью CSSOM в JavaScript:

// Добавление класса к элементу
document.getElementById('myElement').classList.add('newClass');

// Изменение инлайн стиля элемента
document.getElementById('myElement').style.backgroundColor = 'red';

// Изменение значения свойства CSS в таблице стилей
document.styleSheets[0].cssRules[0].style.color = 'blue';

// Получение вычисленного значения стиля элемента
var element = document.getElementById('myElement');
var computedStyle = window.getComputedStyle(element).backgroundColor;
console.log(computedStyle);