Как одновременно поменять цвет множества блоков в css через JS

Question

У меня есть множество блоков у которых один цвет и при нажатии на кнопку они должны разом меняться на другой цвет. Как сделать удобнее и быстрее без кучи querySelector. Надо учесть что у некоторых блоков не надо менять цвет.

#chang {
    background-color: #fde4c6;
}

const Col = document.querySelectorAll('#chang').style;
const btn1 = document.querySelector('.btn-lazuli');

btn1.addEventListener('click', () => {
    Col = 'background-color: #0000ff';
})

Answer 1

Найти все блоки через querySelectorAll, а потом в цикле у них поменять фон:

const blocksToChange = document.querySelectorAll('.block_colored');
const button = document.querySelector('.button');

function changeBackgroundColor(blocksToChange, color) {
  blocksToChange.forEach(block => block.style.backgroundColor = color);
}

button.addEventListener('click', () => changeBackgroundColor(blocksToChange, 'grey'));

<div class="block">1</div>
<div class="block block_colored">2</div>
<div class="block block_colored">3</div>
<div class="block block_colored">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block block_colored">7</div>
<button type="button" class="button">Кнопка</button>

Answer 2

Наверное вот так )

function changeColor() {
  let changeColorBlock = document.querySelectorAll('.change-color');

  for (elem of changeColorBlock) {
    elem.style.backgroundColor = 'green';
  }
}

div {
  width: 150px;
  height: 150px;
  background-color: red;
  display: inline-block;
  margin: 15px;
}

<button onclick="changeColor()">Click</button><br>
<div class="change-color"></div>
<div class="change-color"></div>
<div class="change-color"></div>
<div class="no-change-color"></div>
<div class="no-change-color"></div>
<div class="change-color"></div>
<div class="change-color"></div>
<div class="change-color"></div>

Answer 3

Как вариант можно использовать CSS переменные, поставить нужным блокам класс и классу выдать цвет, который просто передавать в style как переменную.

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

let grid = document.querySelector('.grid');

for(let i = 0; i < 20; i++) {
  grid.innerHTML += `<div class="grid__item${Math.random() < .5 ? ' color-change' : ''}"></div>`
}

document.querySelectorAll('button').forEach(function(e) {
  e.addEventListener('click', function(e) {
    grid.style.setProperty('--color', e.target.innerText);
  });
});

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
  width: 100%;
  --color: blue;
  margin-bottom: 10px;
}

.grid__item {
  display: block;
  width: 100%;
  background-color: #ccc;
}

.grid__item::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.color-change {
  background: var(--color);
}

<div class="grid"></div>

<button>red</button>
<button>#000</button>
<button>green</button>
<button>linear-gradient(45deg, #09f, red)</button>

Answer 4

Вы изменили свой вопрос, добавив решение в котором присутствуют ошибки.

#chang {
    background-color: #fde4c6;
}

Значение атрибута id должно быть единственным на странице.

Данная запись не верна.

const Col = document.querySelectorAll('#chang').style;
const btn1 = document.querySelector('.btn-lazuli');

btn1.addEventListener('click', () => {
    Col = 'background-color: #0000ff';
})

const Col = document.querySelectorAll('.chang'); // это набор элементов, по сути массив
                                                 // И как я написал выше, нужно использовать 
                                                 // для этих элементов атрибут `class` вместо `id`
const btn1 = document.querySelector('.btn-lazuli');

btn1.addEventListener('click', () => {
  Col.forEach(function(e) { // Т.к. это набор, вы должны пройтись по нему, для этого можно
                            // использовать метод forEach
    e.style.backgroundColor = '#0000ff'; // А background-color назначается через
                                         // метод .style.backgroundColor
  });
})

БЛОГ НА HUSL

Как одновременно поменять цвет множества блоков в css через JS

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