我有以下功能，触发时会使 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;
}
}
编辑：正如评论所说，如果样式值不是动态的并且使用：
elems[index].classList.add('someclass');
另一种方法是使用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";
});
}
使用新的 ES6 Array.map() 循环遍历每个项目并更改属性
document.querySelectorAll(selector).map(item => {
item.style.transition = "opacity 0.5s linear 0s";
item.style.opacity = 0.5;
})