Как изменить все цвета класса через DOM?

Question

У меня есть HTML:

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <div id="root">
        
        <h1>
            <span class="yellow">JavaScript.</span>
            Браузерное окружение. 
            Работа с <span class="yellow">DOM.</span>
        </h1>
        <h3>Урок №3</h3>
        <div class="lesson">
            <div class="lesson__text">
                Текст
            </div>
        </div>
    
        </div>   
        <script src="./js/app.js"></script>
    </body>
    </html>

и JS:

  const bodyEl = document.body;
    bodyEl.style.backgroundColor = '#282323';
    
    const rootEl = document.getElementById('root');
    
    
    const YellowEl = document.getElementsByClassName('yellow')[0].style.color = "yellow";

Проблема в том что я не знаю как поменять цвет тега yellow и на JavaScript и на DOM.

Я хотел поменять цвет на желтым тега yellow и сделал так:

const YellowEl = document.getElementsByClassName('yellow')[0,1].style.color = "yellow";

Но поменялся только цвет тега DOM.

Answer 1

Попробуйте так:

let all = document.querySelectorAll('.yellow');

for(let a of all){
a.style.color = "yellow";
}

Answer 2

Можно как-то так
CSS


:root {
    --set-color: #330;
}

.myClass {
    color: var(--set-color);
}

JS


document.documentElement.style.setProperty('--set-color', '#005');

А еще лучше
CSS


:root {
    --set-color: #330;
    --color1: #330;
    --color2: #005;
}

.myClass {
    color: var(--set-color);
}

JS


document.documentElement.style.setProperty('--set-color', '--color2');

БЛОГ НА HUSL

Как изменить все цвета класса через DOM?

Ответы (2 шт):