動態添加樣式可以實現更好的視覺效果和交互效果，下面就介紹一下如何動態和刪除樣式：

方法一、使用obj.className來修改樣式表的類名

obj.className = “style1”;

方法二、使用obj.style.cssTest來修改嵌入式的css

obj.style.cssText = "background-color:black; display:block;color:White;

方法三、使用obj.style.stylePro來修改嵌入式的css

obj.style.backgroundColor= "black";

方法四、使用obj.setAttribute( ,);

obj.setAttribute("class", "style2");

方法五、使用更改外聯的css文件，從而改變元素的css

var obj = document.getElementById("css");

obj.setAttribute("href","css2.css");

方法六、創建和添加<link>和<style>標簽。

創建<link>

var link = document.creatElement(“link”);

     link.rel = “stylesheet”;

     link.type 
 
= “text/css”;

     link.href = url;

     var head = document.getElementByTagName(“head”)[0];

     head.appendChild(link);

創建<style>

var style = document.creatElement(“style”);
     try{
         style.appendChild(document.creatTextNode(“body{background
 
-color:red}”));
}catch(ex){

       Style.styleSheet.cssText = “body{background-color:red}”;
}

     var head = document.getElementByTagName(“head”)[0];

     head.appendChild(link);

刪除樣式可以將相應的屬性值設為空字符串“”。

擴展：上次文章中我們提到如何遍歷HTML的DOM元素，那麽如何獲取遍歷樣式表呢？

要獲取元素的完整的樣式信息，必須使用 window 對象的 getComputedStyle 方法，此方法有2個參數，第一個參數為要獲取計算樣式的元素，第二個參數可以是null、空字符串、偽類(如:before,:after)，這兩個參數 都是必需的。在 IE8 以下瀏覽器中沒有實現 getComputedStyle 方法，但可以使用 IE 中每個元素有自己的 currentStyle 屬性來獲取樣式。獲取元素樣式的兼容代碼如下：

var testDiv = document.getElementById("testDiv");

var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;

// window.getComputedStyle() 非IE瀏覽器

// testDiv.currentStyle  IE瀏覽器

var width = styleInfo.width;　　//100px;

var height = styleInfo.height;　　//100px;

var color = styleInfo.color;　　// rgb(255, 0, 0)

獲取<link>和<style>標簽寫入的樣式，通過 ocument.sstyleSheets[] 獲取某個樣式表。用DOM的樣式表和CSS模塊，可以檢測到文檔中所有的樣式和鏈接到文檔的所有樣式。

Var ss = document.styleSheets[0];

這個數組是styleSheet對象，表示通用樣式。StyleSheet對象具有cssRule[]數組，該數組用於存放樣式表規則。

var obj = document.styleSheets[0];

if( obj.cssRules ) {

     // 非IE [object CSSRuleList]

     rule = obj.cssRules[0]; 

} else {

     // IE [object CSSRuleList]

     rule = obj.rules[0];

}

javaScript之動態樣式