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?
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 above you might be better off putting these values in a class if they are not dynamic and use:
elems[index].classList.add('someclass');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments