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会更合适，如果是，我将如何实施？

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;
    }
}

编辑：正如上面的评论所说，如果这些值不是动态的并且使用它们，那么最好将它们放在一个类中：

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

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";
   });
}

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

2 个答案: