Question

53

Using querySelectorAll to change the style property of multiple elements

rated 0 times [ 57] [ 4] / answers: 1 / hits: 113695 / 9 Years ago, fri, october 16, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janiajohnnad

Add To Favorites

Follow

Total Points: 146

Total Questions: 92

Total Answers: 107

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

janiajohnnad questions

1 How to list all guild members in discord.js v12

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Why does useQuery call cause a re-render in my component?

Sun, Feb 7, 21, 00:00, 3 Years ago

1 HTML open fresh new window again on image onclick

Fri, Nov 6, 20, 00:00, 4 Years ago

1 NestJS controller not mapped

Thu, Jun 18, 20, 00:00, 4 Years ago

1 Using Node.js to generate dynamic word document using Database value

Sat, Jun 13, 20, 00:00, 4 Years ago

View All

answered 9 Years ago alekgermanb · Accepted Answer

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