Как изменить CSS для всех блоков с одинаковым классом в JavaScript

Question

есть функция, которая задает случайный цвет для фона.

  function randColor(elem) {

                    var element = document.querySelector(elem),
                        r = Math.floor(Math.random() * (256)),
                        g = Math.floor(Math.random() * (256)),
                        b = Math.floor(Math.random() * (256)),
                        color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
                        element.style.background = color;

                }
    randColor(".block")

Есть несколько блоков в HTML

<div  class="block">1</div>
<div  class="block">2</div>
<div  class="block">3</div>

На выходе, цвет меняется только у первого.

Как сделать так, чтобы цвет изменялся не только у первого блока, а у всех 3?

Answer 1

function randColor(elem) {

 let elements = document.querySelectorAll(elem);
 elements.forEach( e => {
   let r = Math.floor(Math.random() * (256)),
       g = Math.floor(Math.random() * (256)),
       b = Math.floor(Math.random() * (256)),
       color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
    e.style.background = color});
}
randColor(".block");

<div  class="block">1</div>
<div  class="block">2</div>
<div  class="block">3</div>

Можно и так, rgb():

function randColor(elem) {
 let elements = document.querySelectorAll(elem);
 elements.forEach( e => {
   e.style.background = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
 })
}
randColor(".block");

<div  class="block">1</div>
<div  class="block">2</div>
<div  class="block">3</div>

Или так, hsl():

function randColor(elem) {
  let elements = document.querySelectorAll(elem);
   elements.forEach( e => {
 e.style.background = `hsl(${Math.floor(Math.random()*360)},${Math.floor(Math.random()*100)}%,${Math.floor(Math.random()*100)}%)`;

  })
}
randColor(".block");

<div  class="block">1</div>
<div  class="block">2</div>
<div  class="block">3</div>

БЛОГ НА HUSL

Как изменить CSS для всех блоков с одинаковым классом в JavaScript

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