Как обратиться к css через js

Для обращения к CSS через JS существуют несколько способов.

Использование метода querySelector() объекта document для поиска элементов по селектору CSS и изменения их стилей.

<!DOCTYPE html>
<html>
<head>
    <style>
        .my-class {
            color: red;
        }
    </style>
</head>
<body>
    <p class="my-class">Привет мир!</p>
    <script>
        const element = document.querySelector('.my-class');
        element.style.color = 'blue';
    </script>
</body>
</html>

В данном примере мы создали элемент <p> с классом my-class и изменили его цвет текста с помощью свойства style.color.

Использование метода getComputedStyle() объекта window для получения вычисленных стилей элемента.

<!DOCTYPE html>
<html>
<head>
    <style>
        .my-class {
            color: red;
        }
    </style>
</head>
<body>
    <p class="my-class">Привет мир!</p>
    <script>
        const element = document.querySelector('.my-class');
        const styles = window.getComputedStyle(element);
        console.log(styles.color);
    </script>
</body>
</html>

В данном примере мы получаем цвет текста элемента с классом my-class, используя метод getComputedStyle(). Затем мы выводим полученный результат в консоль.

Использование метода setAttribute() объекта элемента для установки значения атрибута стиля.

<!DOCTYPE html>
<html>
<head>
    <style>
        .my-class {
            color: red;
        }
    </style>
</head>
<body>
    <p class="my-class">Привет мир!</p>
    <script>
        const element = document.querySelector('.my-class');
        element.setAttribute('style', 'color: blue;');
    </script>
</body>
</html>

В данном примере мы используем метод setAttribute() объекта элемента для установки значения атрибута стиля color в значение blue.

Важно понимать, что модификация стилей CSS через JS может привести к проблемам с производительностью и обслуживаемостью кода, если использоваться неправильно. Лучше всего использовать CSS для оформления элементов и взаимодействовать с ними через JS только тогда, когда это необходимо.