как изменить несколько div с одним и тем же классом через querySelector

Question

Мне было интересно, как можно изменить класс на нескольких div одновременно через js. В приведенном ниже примере распознается только первое использование класса, все последующие игнорируются. querySelectorAll, похоже, не работает. Заранее спасибо

function setZoom(color) {
document.querySelector('.var').style.color = color;
  }

.var {
  margin-top:20px;
  color:black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<label for="input1" value="green" onclick="setZoom('blue')">
  <button>green</button>
</label>

<label for="input2" value="red" onclick="setZoom('yellow')">
  <button>btn-yellow,</button>
</label>

<label for="input3" value="pink" onclick="setZoom('pink')">
  <button>btn-pink</button>
</label>
            
            
<div class="var">
  content div 1
</div>
<div class="var">
  content div 2
</div>
<div class="var">
  content div 3
</div>

Answer 1

Вам понадобится querySelectorAll , который вернет список узлов. Затем вы можете повторить это, используя forEach и изменить стиль

function setZoom(color) {
  document.querySelectorAll('.var').forEach((item) => {
    item.style.color = color;
  })
}

.var {
  margin-top: 20px;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<label for="input1" value="green" onclick="setZoom('blue')">
  <button>green</button>
</label>

<label for="input2" value="red" onclick="setZoom('yellow')">
  <button>btn-yellow,</button>
</label>

<label for="input3" value="pink" onclick="setZoom('pink')">
  <button>btn-pink</button>
</label>


<div class="var">
  content div 1
</div>
<div class="var">
  content div 2
</div>
<div class="var">
  content div 3
</div>

Answer 2

Это так просто вместо function setZoom(color) { document.querySelector('.var').style.color = color; } изменить его на function setZoom(color) { document.querySelectorAll('.var').style.color = color; }