Question

如何使用document.getElementsByClassName()更改CSS中的字体？

我尝试使用：

document.getElementsByClassName("classname").style.fontFamily="Your font";

但它不起作用。

我使用的是Firefox 27.0.1，它应该得到支持，所以我不认为这是一个问题。我的代码有问题吗？

Answer 1

首先请注意，它.getElementsByClassName()不是.getElementsByClass()。

.getElementsByClassName()方法返回匹配元素的NodeList，因此，您必须遍历返回的列表以应用该属性，如下所示：

var list = document.getElementsByClassName("classname");

for (var i = 0; i < list.length; ++i) {
    list[i].style.fontFamily="Your font";
}

Answer 2

使用.getElementsByClassName()代替.getElementsByClass()。

此外，document.getElementsByClassName()返回包含所有给定类名的所有子元素的数组。由于它返回一个数组，你需要迭代遍历数组的所有元素，如下所示：

elems = document.getElementsByClassName("classname")
for(elem in elems){
    elem.style.fontFamily="Your font";
}

Answer 3

getElementsByClassName（）返回类似数组的元素集合。像对待真实阵列一样迭代它：

var elements = document.getElementsByClassName("classname");
for(var i = 0; i < elements.length; i++) {
    elements[i].style.fontFamily="Times New Roman";
}

如果你喜欢更短的东西，可以考虑使用jQuery：

$('.classname').css('fontFamily', 'Times New Roman');

Answer 4

请改用：

document.getElementsByClassName("classname").style.font="bold 20px Your Font";

如果你可以使用jQuery：

$('.classname').css("font-family", 'Your Font');

使用document.getElementsByClassName（）更改多个元素的字体？

4 个答案: