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切換效果就可以輕松完成了,自己動手試試吧。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。