<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
。
答案 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";
}
答案 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 ","");