如何通过querySelector改变同一个类的多个div答案

【问题标题】：how to change multiple divs with the same class through querySelector如何通过querySelector改变同一个类的多个div
【发布时间】：2020-02-27 22:32:40
【问题描述】：

我想知道如何通过 js 一次更改多个 div 上的类。在下面的示例中，只有第一次使用该类被识别，之后所有的都被忽略。 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>

【问题讨论】：

querySelectorAll()

标签： javascript html css jquery-selectors

【解决方案1】：

我想改变这个，

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

到这里，

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

querySelector 只选择一个目标元素，querySelectorAll 选择所有目标元素。

【讨论】：

【解决方案2】：

您将需要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>

【讨论】：