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切換效果就可以輕鬆完成了，自己動手試試吧。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/268840.html
微信掃一掃 
支付寶掃一掃 