如何更改具有相同类名的元素的样式

Question

使用javascript，我想将类.s的样式更改为

.s {
  display: block;
}

为什么这不起作用：

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

Answer 1

document.getElementsByClassName：返回一组元素，其中包含所有给定的类名。

您可能有多个具有此类名称的元素。所以你需要提供像

这样的索引

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

为了为具有相同类名的所有元素申请样式：

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

Answer 2

当getElementsByClassName返回一个数组时，您需要对所有找到的元素进行for循环：

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

Answer 3

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

这可能有用！