Using querySelectorAll to change the style property of multiple elements

Question

I have the following function which when triggered will make a DIV become semi-transparent.

function changeOpacity(el) {     var elem = document.getElementById(el);     elem.style.transition = "opacity 0.5s linear 0s";     elem.style.opacity = 0.5; } 

However I would like this function to apply to several DIVs simultaneously. I tried giving each DIV the same class name and then using getElementsByClassName but couldn't figure out how to implement it.

Would querySelectorAll be more appropriate and if so how would I implement it?

Answer 1

I would select them with a querySelectorAll and loop over them.

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

Edit: As a comment said you might be better off putting styling values in a CSS class if they are not dynamic and use:

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

Answer 2

Another way this can be done is with forEach() and ES6+

function changeOpacity(className) {     document.querySelectorAll(className).forEach(el => {         el.style.transition = "opacity 0.5s linear 0s";         el.style.opacity = 0.5;     }); } 

I especially like this syntax when only one style property needs to be updated. For example, if you only needed to change the opacity, and not the transition, you could use a single line:

function setOpacity(className) {     document.querySelectorAll(className).forEach(el => el.style.opacity = 0.5); } 

You could then use a separate method for setting the transition:

function setTransition(className) {    document.querySelectorAll(className).forEach(        el => el.style.transition = "opacity 0.5s linear 0s";    }); }