Почему при изменении значения переменной 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

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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

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

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