Вопрос Как изменить свойство в классе css при помощи js?
- Автор темы Семен
- Дата начала
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class</title>
<style>
.class1 {
background-color: red;
width: 100px;
height: 100px;
}
.class2 {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="RED" id="red">
<input type="button" value="BLUE" id="blue">
<div id="div"></div>
<script>
red.onclick = function () {
div.className = 'class1';
}
blue.onclick = function () {
div.className = 'class2';
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class</title>
<style>
.class1 {
background-color: red;
width: 100px;
height: 100px;
}
.class2 {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="RED" id="red">
<input type="button" value="BLUE" id="blue">
<div id="div"></div>
<script>
red.onclick = function () {
div.className = 'class1';
}
blue.onclick = function () {
div.className = 'class2';
}
</script>
</body>
</html>
Проще всего не менять свойства селектора, а задать новые 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; // Прерываем цикл, если нашли нужное правило
}
}
}
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"> — и все тексты в контейнере краснеют.
Стили, как правило, зафиксированы за классами. А если кто-то хочет поменять стиль элемента с классом, то просто меняет ему список классов (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"> — и все тексты в контейнере краснеют.
