Проще всего не менять свойства селектора, а задать новые const elements = document.querySelectorAll('.text'
elements.forEach(element => {
element.style.color = 'red'
})
Сам я никогда через JS не менял свойство в таблице стилей. Нейронка выдала это: const styleSheets = document.styleSheets;
// Перебираем все таблицы стилей
for (let i = 0; i < styleSheets.length; i++) {
const styleSheet = styleSheets;
// Получаем все CSS правила в текущей таблице стилей
const cssRules = styleSheet.cssRules || styleSheet.rules;
// Перебираем все правила
for (let j = 0; j < cssRules.length; j++) {
const rule = cssRules[j];
// Проверяем, является ли правило селектором .text
if (rule.selectorText === '.text' {
// Меняем свойство color
rule.style.color = 'blue'; // Меняем цвет на синий
break; // Прерываем цикл, если нашли нужное правило
}
}
}
Не встречал такого кода и такой возможности, но и не вижу такой необходимости.
Стили, как правило, зафиксированы за классами. А если кто-то хочет поменять стиль элемента с классом, то просто меняет ему список классов (classList).
Как быть, если нужно поменять стиль сразу всех элементов одного класса?
Можно через document.querySelectorAll(".text" собрать все элементы с этим классом и в цикле поменять им класс.
Но красивее было бы все элементы с интересующим классом поместить в общий контейнер и менять класс только этого контейнера.
Например: <div class="container">
<span class="text">Привет!</span> Как твои <span class="text">дела?</span>
</div> А в стилях идет зависимость стиля от класса контейнера: .container .text {
color: black;
}
.container.red .text {
color: red;
} Меняем <div class="container"> на <div class="container red"> — и все тексты в контейнере краснеют.