如何通过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它将返回一个节点列表。 然后您可以使用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; 
}

querySelector select 只有一个目标元素，而 querySelectorAll select 所有目标元素。