Почему при изменении значения переменной css изменение происходит только в первом блоке

@755 · Регистрация: 12.11.2020

Студворк — интернет-сервис помощи студентам

Будьте добры, проблема указана в заголовке - в примере при нажатии на кнопку изменяется только первая область (блок):

HTML5
1
2
3
4
5
6
7
<div class="d0"> 
  <span class="d1"> Текст 12345 </span>
  <span class="d1"> Текст 12345 </span>
  <span class="d1"> Текст 12345 </span>
 </div>
<br><br>
<button class="kn" onclick="izm_1 ()" > Изменить .d1 </button> </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    --back_0: blue;
}
.d0 {
    --back_1: blue;
 
    width: 760px;
        height: 50px;
    border: 1px solid #b3c9ce;
}
 
.d1 {
    --razm_txt: 18px;
 
    background-color: var(--back_1);
    font-size: var(--razm_txt);
    border: 1px solid black;
    margin-left: 22px;
}

JavaScript
1
2
3
4
5
function izm_1 ()  {
    let rec1= document.querySelector(".d1")
    rec1.style.setProperty('--back_1', 'red');
    rec1.style.setProperty('--razm_txt', '24px');
}

* --back_0 срабатывает для всех элементов с классом d1, но интересно, как реализовать изменение локальной переменной для определенного класса

@@1 · 24.09.2025, 11:03

Сообщение от 755

изменяется только первая область (блок):

Потому что ищешь только первый блок

Сообщение от 755

document.querySelector(".d1")

А должно быть querySelectorAll

@voral · 24.09.2025, 11:16

К тому же несколько странное применение переменных css. Зачем так "сложно"?

Т.е. вариантов несколько:
1. Не совсем красивый т.к. вы в логику зашиваете дизайн. просто ставить font-size = 24px без переменной
2. Оперировать именно стилями. Т.е. например присваиваете класс конкретному элементу или родителю (зависит от решаемой задачи) типа 'edited' и в стилях уже задаете визуальное представление. Таким образом у вас будет разделено дизайн и логика. Т.е. вы просто сообщаете что элемент имеет состояние "отредактирован" (или что вам там нужно) за счет добавление css класса. а уже стилями описываете как должен выглядеть элемент в таком состоянии. (в т.ч. позволит и более гибко управлять дизайном: от размера экрана, при выводе на печать, от системной темы темной/светлой, да и вообще внедрить "темы".....
У вас же, в случае редизайна, придется еще и все скрипты перепахивать.

@755 · 24.09.2025, 11:46 **[ТС]**

И, комментируя первый ответ, вопрос такой: можно ли изменить локальную переменную у класса без поиска каких-либо существующих на странице элементов?

Добавлено через 19 минут
voral, спасибо большое за ответ и советы.

Использование переменных мне нравится, правда возможно из-за недостатка практического опыта. Как раз в частности и в первую очередь потому, чтобы задать единые параметры сайта. Но это глобальные переменные. Есть и другие причины (возможно и решаемые иначе и лучше), но о них не хотел бы рассуждать публично до запуска сайта.

Возможно в данному случае можно было бы обойтись и без локальной переменной, а только стилями (но мне данное решение пришло в голову первым). Может быть имеет смысл привести пример, в связи с которым и возникла данная проблема?

@@1 · 24.09.2025, 11:50

Сообщение от 755

можно ли изменить локальную переменную у класса без поиска каких-либо существующих на странице элементов?

Можно, но тебе это не поможет

JavaScript
1
2
3
let style = document.createElement('style');
style.textContent = `.d1 { background: red; font-size: 24px }`;
document.head.appendChild(style);

krvsa · 24.09.2025, 12:00

Сообщение от 755

вопрос такой: можно ли изменить локальную переменную у класса без поиска каких-либо существующих на странице элементов?

Мочь-то можно (см.пример)... Но только, как писал ранее камрад voral, ты не тем занимаешься.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
body {
    --back_0: blue;
}
.d0 {
    --back_1: blue;
    width: 760px;
    height: 50px;
    border: 1px solid #b3c9ce;
}
 
.d1 {
    --razm_txt: 18px;
    background-color: var(--back_1);
    font-size: var(--razm_txt);
    border: 1px solid black;
    margin-left: 22px;
}
</style>
<div class="d0"> 
    <span class="d1"> Текст 12345 </span>
    <span class="d1"> Текст 12345 </span>
    <span class="d1"> Текст 12345 </span>
 </div>
<button class="kn" onclick="izm_1 ()" > Изменить .d1</button> 
<script>
//
function izm_1(){
    const o = document.createElement('style')
    const v = '.d1 {--back_1: red;}'
    o.appendChild(document.createTextNode(v));
    document.head.appendChild(o);
}
</script>

Добавлено через 1 минуту

Сообщение от 755

Может быть имеет смысл привести пример, в связи с которым и возникла данная проблема?

Валяй!

@755 · 24.09.2025, 15:28 **[ТС]**

krvsa, спасибо, странно - но работает. Действительно, результат тот, что надо.

Но уж очень громоздко выглядит конструкция (не ожидал) - глобальные переменные меняются намного проще.

Добавлено через 3 часа 7 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="stl"> 
 <div class="stl comObl txt "> 
  <div class="com">
    <button  class="but" onclick="kn_1 (1);"> ♥ </button>
    <a href='#' class= 'txt' onclick='kn_1 (1);'> В избранное </a>
  </div>
  <div class="com">
    <button  class="but" onclick="kn_1 (1);"> ► </button>
    <a href='#' class= 'txt' onclick='kn_1 (1);'> Написать </a>
  </div>
 </div>
 <div class="infObl st">  
    Информационная область
 </div>
</div>
 
<div class="stl"> 
 <div class="stl comObl txt "> 
  <div class="com">
    <button  class="but" onclick="kn_1 (1);"> ♥ </button>
    <a href='#' class= 'txt' onclick='kn_1 (1);'> В избранное </a>
  </div>
  <div class="com">
    <button  class="but" onclick="kn_1 (1);"> ► </button>
    <a href='#' class= 'txt' onclick='kn_1 (1);'> Написать </a>
  </div>
 </div>
 <div class="infObl st">  
    Информационная область
 </div>
</div>
 
<br><br>
<button id="kn_1" class="kn" onclick="del_1 ()" > Без комментариев </button>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.stl {
    display: inline-block;
    width: 80%;
    border: solid 2px black; 
}
.st {
    display: inline;
}
 
.comObl  {
    --len_kn: 32px;
    --lenKn_txt: 190px;
 
    width: calc(var(--len_kn)+ 8px, 40px);
 
    margin-top: 15px;
    border: solid 1px red;
    /*background-color: var(--kn_t_fon, yellow);*/
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}
.comObl:hover {
    width: var(--lenKn_txt, 200px);
    width: calc(var(--lenKn_txt) + 15px, 200px);
 
}
 
.com {
    width: var(--len_kn, 32px);
 
    background-color: var(--kn_t_fon, darkgray);
    border: solid 1px black;
     border-radius: 9px;
    padding: 1px 3px;
    font-size: var(--razm_txt2, 26px);
}
     
.com:hover {
    cursor: pointer;
    border: solid 1px yellow; 
    width: var(--lenKn_txt, 190px);
}
 
.com >a  {
    margin-left: 10px;
}
 
.com .but {
    width: 32px;
    width: var(--len_kn, 40px);
    background-color: var(--kn_t_fon, darkgray);
 
    font-size: var(--razm_txt2, 20px);
 
 /* Remove border from buttons */
 padding: 0;
 border: none;
 background: none;
}
 
.txt {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;    /* убрать подчёркивание ссылок */
  }
 
.infObl  {
    width: 50%;
    font-size: var(--razm_txt2, 20px);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let i_del= true;
function del_1 ()  {
 let rec= document.querySelector(".comObl")
 if (i_del) {   
    rec.style.setProperty('--lenKn_txt', '32px');
    kn_1.textContent= "+ Комментарии";
    i_del= false;
 }
 else   {
    rec.style.setProperty('--lenKn_txt', '190px');
    kn_1.textContent= "Без комментариев";
    i_del= true;
 }
}

Раз уж начал тему, надо ее довести до конца.

Пример рабочий, но прошу прощения, если где-то что-то некрасиво - переносил из рабочего кода и только сейчас начал заниматься и дизайном. voraa ранее высказался, что <a> ни к месту в таком назначении. За основу брался чужой пример, других альтернатив не было и меня вполне устраивала данная технология - в силу небольшой значимости данного кода, не так уж и важно, как будет он реализован на первом этапе.
Но раз уж вынес на обсуждение и если кто-то предложит что-то лучшее, почему бы и нет.

Нужно было скрыть показ комментариев.
Вот что у меня получалось - при отказе от вывода комментариев (его имитирует кнопка) переменная изменялась, но почему-то только для первого элемента, а не всех блоков с данным классом (решение krvsa подсказал, за что еще раз спасибо, но возможно есть и более интересное)

@voraa · 24.09.2025, 15:35

Сообщение от 755

глобальные переменные меняются намного проще.

Они и меняются просто. Но ты же не глобальную менял, а локальную, для конкретного span. А надо было глобальную для этих спанов, например, определенную для родительского div.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
body {
    --back_0: blue;
}
.d0 {
    --back_1: blue;
    width: 760px;
    height: 50px;
    border: 1px solid #b3c9ce;
}
 
.d1 {
    --razm_txt: 18px;
    background-color: var(--back_1);
    font-size: var(--razm_txt);
    border: 1px solid black;
    margin-left: 22px;
}
</style>
<div class="d0"> 
    <span class="d1"> Текст 12345 </span>
    <span class="d1"> Текст 12345 </span>
    <span class="d1"> Текст 12345 </span>
 </div>
<button class="kn" onclick="izm_1 ()" > Изменить .d1</button> 
<script>
//
function izm_1(){
    const div = document.querySelector('.d0')
    div.style.setProperty('--back_1', 'red');
}
</script>

krvsa · 24.09.2025, 15:41

Сообщение от 755

глобальные переменные меняются намного проще

Нужно не переменные менять, а классы элементам добавлять и удалять...

Добавлено через 1 минуту

Сообщение от 755

странно - но работает

Ничего странного, обычная каскадность стилей...

@755 · 24.09.2025, 16:17 **[ТС]**

Сообщение от voraa

А надо было глобальную для этих спанов, например, определенную для родительского div.

Спасибо. Спускался по родительским, таким образом и дошел до body. класс .d0 также пробовал (даже осталась переменная), сейчас проверил - работает. Объяснение одно - где-то что-то не изменил, поэтому тогда и не работало - присуща такая черта как невнимательность (иногда смотришь на явную синтаксическую ошибку и не видишь).

Спасибо всем за помощь. Разобрался с вашей помощью.

Осталось только решить, что лучше: переменные менять или классы добавлять. Классы добавляю/удаляю, но пока не убедили, что надо поступать так всегда - если есть переменные, зачем плодить еще и классы.
Единственный аргумент от voral, "У вас же, в случае редизайна, придется еще и все скрипты перепахивать." может перевесить. Но в данном случае при редизайне затрагивается только одна функция, а это уже не проблема.

Добавлено через 5 минут

Сообщение от krvsa

Ничего странного, обычная каскадность стилей...

Почему так написал. Редко использую document.createElement('style') / head.appendChild(style), думал они используются для создания элементов, а тут изменение значения переменной. Отсюда и было недоверие к конструкции, если бы не знал автора.

@voral · 24.09.2025, 16:51

Сообщение от 755

Единственный аргумент от voral, "У вас же, в случае редизайна, придется еще и все скрипты перепахивать." может перевесить. Но в данном случае при редизайне затрагивается только одна функция, а это уже не проблема.

Ну это то, что на поверхности. А так вы себе сами усложняете жизнь. Применяете инструменты предназначенные для иных целей, не по назначению. Запутывая клубок "обязанностей". Если вы сейчас пишите только для "попробовать" и выкинуть этот код на всегда. (и забросить программирование, верстку и всю сопутствующую ) Условно можно наплевать....

Вы строите свое решение на галимых костылях. И если вы намереваетесь этим решением (которое создаете) пользоваться и развивать. То это ваше нагромождение рано или поздно будет вас бить полбу. т.к. простейшая правка (или исправление найденного бага) будет занимать у вас время исчисляемое неделями, там где даже с поверхостными знаниями, можно было бы решить за час. И по мере разрастания все будет становиться только хуже.

Тем более, гарантирую, отвлечетесь от проекта на полгодика - и вы уже забудете, что и как. И разобраться будет максимально сложно. Даже с помощью форума.

А баги у вас будут просто гарантированно. (плюсом к "типичным" багам разработчика у которого не так много опыта)...

@755 · 24.09.2025, 17:30 **[ТС]**

Сообщение от voral

... будет занимать у вас время исчисляемое неделями, там где даже с поверхостными знаниями, можно было бы решить за час. И по мере разрастания все будет становиться только хуже.

Спасибо, voral, за потраченное время и советы. Возможно, Вы и правы. Иногда действительно трачу время намного больше, чем следовало бы. Даже сегодня, если бы не невнимательность, можно было бы решить сегодняшний вопрос за полчаса-час, вместо полдня и даже больше.
Иногда не соглашаюсь с кем-то, но но вижу для этого причины. Ваше утверждение: " гарантирую, отвлечетесь от проекта на полгодика - и вы уже забудете, что и как." - думаю, оно ошибочно. И вот почему. Уже отвлекался от проекта минимум на 4 месяца (взялся за другой проект, программу документирования своего кода. Ошибся, решив что за 2 месяца большую часть напишу). Через 4 месяца вернулся, потребовалась пара дней, чтобы опять вникнуть в проект. И это при том, что очень мало комментировал код.

А по поводу правки. Когда-то писал бухгалтерию чисто для себя. И даже через год не было проблем что-то изменить или добавить. Конечно не всегда так. Может изменение одного потянуть другие ошибки - было и такое не так давно, что признаюсь меня сильно удивило, но видимо потерял навыки.

На самый же главный вопрос - будет ли все написанное практически работать ответит только время.

@voraa · 24.09.2025, 19:43

А вот был еще случай (с)

На мой взгляд изменение переменной CSS из скрипта иногда может быть (может и не единственным) но эффективным и красивым решением.
Вот пример (на основе реальной ситуации)

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .cont {
            display: flex;
        }
 
        #range {
            writing-mode: vertical-lr;
            height: 200px;
        }
 
        #out {
            display: block;
            width: 120px;
        }
 
        svg {
            --mash: 1;
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }
 
        .blue-2 {
            --border-width: 2;
            --border-color: blue;
        }
 
        .blue-4 {
            --border-width: 4;
            --border-color: blue;
        }
 
        .red-3 {
            --border-width: 3;
            --border-color: red;
        }
 
        .red-4 {
            --border-width: 4;
            --border-color: red;
        }
 
        .green-4 {
            --border-width: 3;
            --border-color: green;
        }
 
        .green-6 {
            --border-width: 6;
            --border-color: green;
        }
 
        :is(rect, circle) {
            stroke-width: calc(var(--border-width) / var(--mash));
            stroke: var(--border-color);
            fill: transparent;
        }
    </style>
</head>
 
<body>
    <div class="cont">
        <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
            <rect class="blue-2" x="50" y="50" width="150" height="150" />
            <circle class="red-4" cx="100" cy="100" r="40" />
            <rect class="green-6" x="100" y="210" width="130" height="80" />
            <circle class="blue-2" cx="220" cy="300" r="60" />
        </svg>
        <div>
            <input type="range" id="range" min="1" max="400" value="100" list="mash">
            <output id="out" for="range"></output>
        </div>
    </div>
 
    <script>
        const range = document.getElementById('range');
        const svg = document.querySelector('svg');
        const out = document.getElementById('out');
        function setmash(msh) {
            const { width, height } = svg.getBoundingClientRect();
            const wm = width / msh;
            const hm = height / msh;
            const vb = `0 0 ${wm} ${hm}`;
            svg.setAttribute('viewBox', vb);
            svg.style.setProperty('--mash', msh);
            
            const sout = (msh >= 1) ? `${msh.toFixed(1)} : 1` : `1: ${(1 / msh).toFixed(1)}`;
            out.textContent = sout;
        }
        range.addEventListener('input', () => {
            const msh = range.value / 100;
            setmash(msh);
        });
 
        setmash(1);
    </script>
</body>
</html>

https://codepen.io/voraa/pen/gbPaLRo

Смысл в том, что бы при изменении масштаба не менялись толщины линий. Они должны оставаться такими же, как при начальном масштабе 1:1

В реально проекте всяких прямоугольников окружностей и линий могло быть больше сотни, и разных классов.

Более простого решения я не нашел.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@voral 3012 / 1446 / 262 Регистрация: 16.03.2008 Сообщений: 6,453 Записей в блоге: 2
	24.09.2025, 11:16
	К тому же несколько странное применение переменных css. Зачем так "сложно"? Т.е. вариантов несколько: 1. Не совсем красивый т.к. вы в логику зашиваете дизайн. просто ставить font-size = 24px без переменной 2. Оперировать именно стилями. Т.е. например присваиваете класс конкретному элементу или родителю (зависит от решаемой задачи) типа 'edited' и в стилях уже задаете визуальное представление. Таким образом у вас будет разделено дизайн и логика. Т.е. вы просто сообщаете что элемент имеет состояние "отредактирован" (или что вам там нужно) за счет добавление css класса. а уже стилями описываете как должен выглядеть элемент в таком состоянии. (в т.ч. позволит и более гибко управлять дизайном: от размера экрана, при выводе на печать, от системной темы темной/светлой, да и вообще внедрить "темы"..... У вас же, в случае редизайна, придется еще и все скрипты перепахивать. 1

@755 -13 / 2 / 0 Регистрация: 12.11.2020 Сообщений: 359
	24.09.2025, 11:46 [ТС]
	И, комментируя первый ответ, вопрос такой: можно ли изменить локальную переменную у класса без поиска каких-либо существующих на странице элементов? Добавлено через 19 минут voral, спасибо большое за ответ и советы. Использование переменных мне нравится, правда возможно из-за недостатка практического опыта. Как раз в частности и в первую очередь потому, чтобы задать единые параметры сайта. Но это глобальные переменные. Есть и другие причины (возможно и решаемые иначе и лучше), но о них не хотел бы рассуждать публично до запуска сайта. Возможно в данному случае можно было бы обойтись и без локальной переменной, а только стилями (но мне данное решение пришло в голову первым). Может быть имеет смысл привести пример, в связи с которым и возникла данная проблема? 0