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

一尘不染

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

css

我具有以下功能，当触发该功能时，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更合适，如果可以的话，我将如何实施呢？

阅读 1319

2020-05-16

共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');

2020-05-16