使用Javascript更改类的fontSize

时间:2015-05-13 13:59:59

标签: javascript

<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

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

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

http://jsfiddle.net/9px6LyLp/

答案 2 :(得分: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";
}

答案 3 :(得分:0)

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

.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循环遍历该类的所有实例

答案 4 :(得分:0)

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 ","");