javaScript之動態樣式

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

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

obj.className = 「style1」;

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

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

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

obj.style.backgroundColor= "black";

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

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

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

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

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

方法6、建立和添加<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];

}