javascript - 使用javascript更改ul元素的字体大小

Question

这是CSS:

#content ul {
               font-size: 12px;
           }

我正在尝试:

document.getElementById("content ul").style.fontSize = 8px;

但这对我不起作用。有人可以建议如何执行此操作吗？

Answer 1

两个问题:

1. 样式属性是字符串，因此您需要 "8px" 而不是 8px。

2. getElementById 通过 ID 获取元素。您正在传递一个复合选择器(并且您缺少其中的 # )。您必须使用 ID 然后找到 child (通过 getElementsByTagName )，或使用 querySelector (对于第一个匹配元素)或 querySelectorAll (对于所有匹配的元素)代替。 (请注意，尽管总体上得到了很好的支持，但一些较旧的浏览器没有最后两个；details。)

例如，在支持 querySelector 的浏览器中，您可以通过以下方式更改第一个 匹配元素的字体大小:

document.querySelector("#content ul").style.fontSize = "8px";

或者全部

var list = document.querySelectorAll("#content ul");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].style.fontSize = "8px";
}

或者在旧版浏览器上:

var content = document.getElementById("content");
var list = content.getElementsByTagName("ul");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].style.fontSize = "8px";
}