如何使用forEach修改同一class多个元素的样式属性？

你的代码存在几个关键错误，导致只有第一个元素颜色被修改：

1. 变量错误覆盖：在switchColor函数中，你重新将testArr赋值为document.querySelector(".testclass")，而querySelector本身只返回第一个匹配的元素，所以每次循环都在重复修改同一个元素。
2. 循环逻辑失效：你把testArr转成键值对数组后执行forEach，但循环过程中完全没用到当前迭代的元素，反而重新获取元素，彻底偏离了遍历所有目标元素的初衷。

下面提供两种简洁有效的修正方案：

方案一：使用querySelectorAll（推荐） #

querySelectorAll会返回所有匹配元素组成的NodeList，支持直接用forEach遍历：

document.querySelector('#btn1').onclick = function () {
    // 获取所有class为testclass的元素
    const testElements = document.querySelectorAll(".testclass");
    // 遍历每个元素修改文字颜色
    testElements.forEach(element => {
        element.style.color = "green";
    });
}

方案二：使用getElementsByClassName #

getElementsByClassName返回HTMLCollection类数组对象，需转成数组后再遍历：

document.querySelector('#btn1').onclick = function () {
    const testElements = document.getElementsByClassName('testclass');
    // 转成数组后遍历修改
    Array.from(testElements).forEach(element => {
        element.style.color = "green";
    });
}

HTML #

<h1>For each practice</h1>
<ul>
    <li>
        <p class="testclass">1</p>
    </li>
    <li>
        <p class="testclass">2</p>
    </li>
    <li>
        <p class="testclass">3</p>
    </li>
    <li>
        <p class="testclass">4</p>
    </li>
</ul>
<button id="btn1">Click me</button>

JavaScript（以方案一为例） #

document.querySelector('#btn1').onclick = function () {
    const testElements = document.querySelectorAll(".testclass");
    testElements.forEach(element => {
        element.style.color = "green";
    });
}

内容的提问来源于stack exchange，提问作者Péter Szabó