Style an array of elements that have a specific computed css property value

Question

What I want to achieve: All children with an opacity of 0.01 get an increment of 1 in their opacity values.

Problem: As you can see below, this is as far as I got. I cant figure out how to tell js to select all those children elements based on a computed value and add some style to them. I looped through them and got their indexes, as well as their computed values but that is where im stuck now.

HTML:

 <div id='a'>
    <span>How</span>
    <span>are</span>
    <span>you?</span>
 </div>

JS:

var elem = document.getElementById('a');
for (i = 0; i < 10; i++) {
    var x = window.getComputedStyle(elem.children[i], null).getPropertyValue('opacity');
    parseFloat(x)[i]
}

Question: How do I add some style to an array of elements that have a specific computed value of a property?

@mplungjan I know but that person could have told me. Its was pretty rude. Ok I will add some more code — Asperger
– Asperger, Commented Oct 10, 2015 at 21:15
I guess you could add some styling so the code will actually do something. I am off to bed :) — mplungjan
– mplungjan, Commented Oct 10, 2015 at 21:21

nick · Accepted Answer · 2015-10-10 22:17:26Z

1

You need to capture the return value parseFloat() if you want to do anything with it. You'll want to do something like this:

var elem = document.getElementById('a');
for (i = 0; i < elem.children.length; i++) {
    var x = window.getComputedStyle(elem.children[i], null).getPropertyValue('opacity');
    var opacity = parseFloat(x);
    if (opacity === 1.0) {
       elem.children[i].style.your_style = whatever;
    }
}

edited Oct 10, 2015 at 22:17

answered Oct 10, 2015 at 21:49

nick

20.1k2 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Grundy Over a year ago

and also change 10 to elem.children.length otherwise it raise error if children count less than 10 :-)

nick Over a year ago

@Grundy Thanks! For some reason I didn't bother to check that line.

Collectives™ on Stack Overflow

Style an array of elements that have a specific computed css property value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related