使用querySelectorAll更改多個元素的樣式屬性

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