js設置字體顏色（文字顏色和內容的方法）

JavaScript三種動態改變樣式屬性

在JavaScript中，有兩種方式可以動態地改變樣式的屬性，一種是使用樣式的style屬性，另一種是使用樣式的className屬性。另外，控制元素的顯示和隱藏使用display屬性。

1.style 屬性

設置style屬性語法：

HTML元素.style.樣式屬性=”值”；

在JavaScript中使用CSS樣式與在HTML中使用CSS稍有不同，由于在JavaScript中“-”表示減號，因此如果樣式屬性名稱中帶有“-”號，要省去“-”，并且“-”后的首字母要大寫。例如，在頁面中有一個id為titles的div，要改變div中的字體顏色為紅色，字體大小為25px，代碼如下所示:

document.getElementById(“titles”).style.color=”#ff0000″;

document.getElementById(“titles”).style.fontsize=”25px”;

2.className屬性

在HTML DOM中，className屬性可設置或返回元素的class樣式。

設置 className屬性語法：

HTML元素，className=”樣式名稱”；

將上述示例中div中的字體樣式寫在樣式表中，使用className屬性來控制，代碼如下所示。

.divStyle{color:#ff0000;font-size:25px;}

document.getElementById(“titles”).className=”divStyle”;

關于這兩種方式的具體使用，請參考《QlavaScript制作頁面特效》的相關視頻。

3.display屬性

display屬性控制元素的顯示和隱藏，取值有none（隱藏）和block（顯示）。

設置 display屬性語法：

HTML元素.display=”值”；

到這里，任務8中的Tab切換效果就可以輕松完成了，自己動手試試吧。