CODEWITHSUNDEEP
javascripthtmlcss
Maloke
Maloke

Reputation: 224

Why isn't javascript applying a style on a element?

This piece of code masteries = document.querySelectorAll(".hidden-masteries"); return this on console:

[<div class=​"hidden-masteries">​…​</div>​, <div class=​"hidden-masteries">​…​</div>​]

And this is the complete code:

var masteries = document.querySelectorAll(".hidden-masteries");
for (var m = masteries.length-1; m >= 0; m--) {
    if (m == 0) {
    masteries.top = 0;
    } else {
    masteries.bottom = 0;
    }
}

It should add the css propertie top: 0; to element 0 and bottom: 0; to the other, but both is not working.

Upvotes: 0

Views: 75

Answers (5)

richbai90
richbai90

Reputation: 5204

shouldn't it be masteries.style.top = 0?

http://www.w3schools.com/jsref/prop_style_top.asp

Upvotes: 0

jko
jko

Reputation: 2098

use this:

var masteries = document.querySelectorAll(".hidden-masteries");
for ( var m = masteries.length-1 ; m >= 0 ; --m ) {
    masteries[m].style[ m > 0 ? "bottom" : "top" ] = "0px";
}

Upvotes: 0

juuga
juuga

Reputation: 1314

Try masteries[m].style.top = 0;

Upvotes: 3

Pointy
Pointy

Reputation: 413712

You need to index into the node list, and then operate on the style object:

  masteries[m].style.top = 0;

Upvotes: 1

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26699

CSS properties are not being added in this way. You have to set materies[m].style.top

Upvotes: 2

Related Questions