Question

<div id="release-0">
  <p class="release-4"> Here is some text, add a class "done" to the parent div</p>
</div>

<div id="release-1">
  <p>remove the #release-1 div</p>
</div>

<h1>Change this text to finish release 2</h1>

<div id="release-3">
  <p class="release-4"> add CSS to this div</p>
</div>

如何选择所有出现的课程.release-4并使用Javascript将text-size更改为2em？

我试过这个：

document.getElementsByClassName("release-4").style.fontSize = "2em";

但这不起作用。

这确实有效：

document.getElementsByClassName("release-4")[0].style.fontSize = "2em";

但它只选择第一次出现.release-4。

Answer 1

Epsilon方法返回元素集合。您应该遍历它们并为每个元素单独设置必要的字体值。

Answer 2

您可以使用querySelectorAll选择哪个类，然后遍历返回的集合，这是一个示例：

var el = document.querySelectorAll(".release-4");
for ( var i = 0; i < el.length; i ++ ) {
    el[i].style.fontSize = "2em";
}

http://jsfiddle.net/9px6LyLp/

Answer 3

您需要遍历.getElementsByClassName()返回的NodeList并将更改应用于每个元素。

var elements = document.getElementsByClassName('release-4');

for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.fontSize = "2em";
}

Answer 4

我建议为每个元素添加一个新类，而不是单独编辑每个样式

.newClass {
  font-size: 2em;
}

我知道您的问题是JavaScript，但JQuery的解决速度要快得多。

//Add a class
$(".release-4").addClass('newClass');
//If you want to remove the existing class after
$(".release-4").addClass('release-4');

如果您仍想手动设置样式，可以执行以下操作：

$(".release-4").css('font-size','2em');

JQuery循环遍历该类的所有实例

Answer 5

CSS

    .newClass {
  fontSize: 2em;
}

的javascript

var el=document.getElementsByClassName('release-4');
for(var i=0, var tot=el.length; i < tot; i++){
    el[i].className = " release-4  newClass ";
}

删除类newClass：相同的for循环和

el[i].className = " release-4 ";

删除类release-4：同样用于循环和

el[i].className = " newClass ";

删除类newClass也可以使用

el[i].className = el[i].className.replace(" newClass ","");

使用Javascript更改类的fontSize

5 个答案: