使用querySelectorAll改变多个元素的style属性

Question

我有以下功能，触发后会使 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 会更合适吗？如果是这样，我将如何实施？

原文由 user2840467 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会用 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;
    }
}

编辑：正如评论所说，如果样式值不是动态的并使用，您最好将样式值放在 CSS 类中：

 elems[index].classList.add('someclass');

原文由 AtheistP3ace 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种方法是使用 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";
   });
}

原文由 Allen 发布，翻译遵循 CC BY-SA 4.0 许可协议