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:

Answer 1

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";
}

Answer 2

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

this may work!

Answer 3

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";
}