使用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，然后找到子項（通過getElementsByTagName ），或者使用querySelector （對於第一個匹配元素）或querySelectorAll （對於所有匹配元素）代替。 （請注意，盡管總體上得到了很好的支持，但是某些較舊的瀏覽器沒有最后兩個； 詳細信息 。）

因此，例如，這是在帶有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";
}

Answer 2

<ul>'s是元素，而不是id。 首先通過id獲取content元素。 然后，在其中獲得無序列表的子節點。 最后遍歷列表並更改大小。 正如TJ所說，您需要輸入一個字符串。

var lists = document.getElementById('content').getElementsByTagName('ul');
for (var i; i < lists.length; i++ ) {
     lists[i].style.fontSize = '8px';
}

Answer 3

您需要正確選擇它們。 首先，您需要獲取包含有問題的<ul>的元素。

var contentArea = document.getElementById("content");

然后，您需要按標記名獲取適當的標記：

var tags = contentArea.getElementsByTagName("ul");

然后循環瀏覽以設置字體大小：

for (i=0; i<tags.length, i++)
{
    tags[i].style.fontSize = "8px"; // Don't forget the " here
}