Javascript 使用querySelectorAll更改多个元素的样式属性

我有以下功能，当被触发时，将使DIV变成半透明

function changeOpacity(el) {
    var elem = document.getElementById(el);
    elem.style.transition = "opacity 0.5s linear 0s";
    elem.style.opacity = 0.5;
}

但是，我希望此函数同时应用于多个div。我尝试给每个DIV赋予相同的类名，然后使用

getElementsByClassName

，但不知道如何实现它

---

querySelectorAll

是否更合适？如果合适，我将如何实现它？

我将使用querySelectorAll选择它们，并在其上循环

function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for ( ; index < length; index++) {
        elems[index].style.transition = "opacity 0.5s linear 0s";
        elems[index].style.opacity = 0.5;
    }
}

---

另一种方法是使用

forEach（）

和ES6+

function changeOpacity(className) {
    document.querySelectorAll(className).forEach(el => {
        el.style.transition = "opacity 0.5s linear 0s";
        el.style.opacity = 0.5;
    });
}

当只需要更新一个样式属性时，我特别喜欢这种语法。例如，如果只需要更改不透明度，而不需要更改过渡，则可以使用单线：

function setOpacity(className) {
    document.querySelectorAll(className).forEach(el => el.style.opacity = 0.5);
}

然后，可以使用单独的方法设置转换：

function setTransition(className) {
   document.querySelectorAll(className).forEach(
       el => el.style.transition = "opacity 0.5s linear 0s";
   });
}

---

1.使用

querySelectorAll

2选择所有匹配的元素。循环此集合并将样式添加到单个元素。我建议将类与

classList

一起使用，只需做一个更改-需要在变量行末尾使用逗号而不是分号，以简化它。实际上，它是按照你说的那样工作的，但有一件事我注意到了（不是反对你的正确解决方案，而是我没有解决的一个问题），那就是我忘了在我的函数调用（slaps head）中为类名添加句号，我没有发布（再次slaps head）@12你指的是索引和长度吗？没有任何理由，我一直都是这样做的。至于长度，这是出于性能原因。您很可能永远不会看到长度很小的问题，但是

elems.length

每次在for语句中循环时都会被调用，这可能会影响性能。最好在循环外获得一次长度并存储它。@12没问题。乐意回答和帮助。我相信，即使省略了初始化、条件或最终表达式块，分号也是必需的。3个块都不是必需的，但两个分号是必需的。

function setTransition(className) {
   document.querySelectorAll(className).forEach(
       el => el.style.transition = "opacity 0.5s linear 0s";
   });
}