如何通过 querySelector 更改具有相同 class 的多个 div

Question

我想知道如何通过 js 一次更改多个 div 上的 class。在下面的示例中，只有 class 的第一次使用被识别，之后的所有都被忽略。 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，这将 return 一个节点列表。然后您可以使用 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; 
}

querySelectorselect只有一个目标元素，querySelectorAllselect所有目标元素。

如何通过 querySelector 更改具有相同 class 的多个 div

how to change multiple divs with the same class through querySelector

html

javascript

css

jquery-selectors