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

ldfqzlk8  于 2022-12-15  发布在  其他
关注(0)|答案(4)|浏览(327)

我有以下函数,当触发将使一个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更合适吗?如果合适,我将如何实现它?

e7arh2l6

e7arh2l61#

我将使用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');
niwlg2el

niwlg2el2#

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

8hhllhi23#

另一种方法是使用FOR-IN中的Object条目:

let elements = document.querySelectorAll('[attribute name]');

if (elements != undefined) {
    for (let element in Object.entries(elements)) {
        elements[element].style.transition = 'opacity 0.5s linear 0s';
        elements[element].style.opacity = 0.5;
    }
}

根据需要进行修改。

hc8w905p

hc8w905p4#

使用新的ES6 Array.map()遍历每个项目并更改属性

document.querySelectorAll(selector).map(item => {
item.style.transition = "opacity 0.5s linear 0s";
item.style.opacity = 0.5;
})

相关问题