在web開發中,CSS樣式表是定義界面外觀和布局的重要技術。而Javascript是web中最常用的腳本語言之一,它可以幫助我們實現對CSS樣式的動態控制。
對于修改CSS樣式表,我們一般分為兩種情況:一種是直接通過js代碼修改內嵌的style樣式,另一種是通過js代碼修改外鏈的樣式表。
下面我們將介紹如何通過Javascript修改外聯CSS樣式表。需要注意的是,由于瀏覽器安全性的限制,我們只能修改與當前頁面相關的外部樣式表,不可以去操作其他域的樣式表。
//獲取外聯樣式表的方法 var css = document.styleSheets[0]; //修改CSS樣式 css.rules[0].style.color = 'red'; //或者修改CSS類名 css.rules[0].className = 'newClass';
上述代碼中,我們首先通過document.styleSheets獲取了當前頁面中的外部樣式表。然后我們通過rules或者cssRules屬性來獲取樣式表的各個規則,并修改他們的屬性或者類名。
注:rules屬性在IE瀏覽器中使用,而其他瀏覽器需要使用cssRules屬性。
在某些情況下,我們還需要動態的添加或者刪除一個外聯樣式表。這個時候我們可以使用以下代碼實現:
//動態添加一個樣式表 var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); //動態刪除一個樣式表 head.removeChild(link);
通過上述代碼,我們可以通過js代碼實現對外部CSS樣式表的動態控制。