使用Javascript更改类的字体大小

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>

如何使用Javascript选择所有类名为.release-4的元素，并将其text-size更改为2em？

我尝试了以下代码：

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

但是那样做行不通。

这个可以使用：

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

但是它只选择了第一个出现的.release-4。

- Nic Stelter

---

getElementsByClassName 返回一个节点集合，如果你想用这种方式实现，你需要迭代集合并将样式应用于所有节点。不过更好的做法是添加一个类。 - Etheryte

Answer 1

您需要循环遍历由.getElementsByClassName()返回的NodeList，并对每个元素应用您的更改。

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

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

- danielm

Answer 2

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

- Caminante

---

有没有办法在不循环遍历的情况下应用更改到所有元素？ - Muhammad Qasim

@MuhammadQasim我认为这是不可能的。 为什么要避免循环呢？ 或者你可以使用CSS（即将类名设置在父元素上，可以影响所有子元素）。 - Caminante

Answer 3

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

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

http://jsfiddle.net/9px6LyLp/

- Radonirina Maminiaina

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Matt Burland

querySelectorAll 比 getElementsByClassName 更慢。而且 getElementsByClassName 是实时更新的，但 querySelectorAll 不是，它只在被调用时获取数据。 - DDA

Answer 4

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：同样适用于循环和

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

移除类别 release-4：同一循环

el[i].className = " newClass ";

要删除类newClass，您也可以使用以下方法

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

- DDA

Answer 5

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

.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可以为您循环遍历所有类的实例

- Seth McClaine

---

@Radonirina：不要这样彻底地更改别人的答案。你的编辑不仅改变了答案的意思，而且它完全是错误的。 - user1106925

感谢@squint标记该问题。 - Seth McClaine