Для обращения к 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 только тогда, когда это необходимо.
