How to change the style of elements with same class name

Question

Using javascript, I want to change the style of class .s into

.s {
  display: block;
}

Why this cannot work:

document.getElementsByClassName('s').style.display='block';

Why not create a class for the new styles and append this new class to all of the matching classes? — Joshua Smickus, Jan 06 '14 at 09:14
@JoshSmickus, those lines are used in the response code of a checkbox. I want to use that checkbox to control if some elements should be shown. — Yishu Fang, Jan 07 '14 at 01:57
So, you could write: `var elems = document.getElementsByClassName('s'); for(var i = 0; i < elems.length; i++) { elems[i].className += " new-class"; }` Then define new-class with appropriate styles — Joshua Smickus, Jan 07 '14 at 09:36
@JoshSmickus, What I really want to say is: because of "...", I don't think it is appropriate to "create a class for the new style and ..." — Yishu Fang, Jan 08 '14 at 08:07
@JoshSmickus. I mean, I don't think it is appropriate to "create a class for the new style and ..." for my situation. — Yishu Fang, Jan 09 '14 at 06:15

score 21 · Accepted Answer · answered Jan 06 '14 at 09:04

21

document.getElementsByClassName: returns a set of elements which have all the given class names.

You may have multiple elements with this class name. so you need to provide index like

document.getElementsByClassName('s')[0].style.display='block';

Inorder to apply for style for all elements with same class name:

var ele = document.getElementsByClassName('s');
for (var i = 0; i < ele.length; i++ ) {
    ele[i].style.display = "block";
}

answered Jan 06 '14 at 09:04

Praveen

1

Is there a easy way to change all the items at the same time. – Yishu Fang Jan 06 '14 at 09:05
1

@FANGYishu go for looping. – Praveen Jan 06 '14 at 09:06
It would be nice if we can change the style sheet directly, not the style of just each elements. – Yishu Fang Jan 06 '14 at 09:14
@FANGYishu if you're trying to change the css rules then take a look at [T.J Crowder's answer](http://stackoverflow.com/a/9153841/1671639) – Praveen Jan 06 '14 at 09:24

score 0 · Answer 2 · answered Jan 06 '14 at 09:05

0

As getElementsByClassName returns an array you need to make a for loop over all found elements:

var elements = document.getElementsByClassName('s');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "block";
}

answered Jan 06 '14 at 09:05

RononDex

score -1 · Answer 3 · answered Jan 06 '14 at 09:06

-1

var sCls = document.getElementsByClassName('s');
for(var i in sCls) {
    sCls[i].style.display='block';
}

this may work!

answered Jan 06 '14 at 09:06

jingyinggong

3 Answers3