首页 > 代码库 > javaScript之动态样式
javaScript之动态样式
动态添加样式可以实现更好的视觉效果和交互效果，下面就介绍一下如何动态和删除样式：
方法一、使用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之动态样式