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];

}