使用 style 属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，使用 getComputedStyle 和currentStyle，这只能获取却无法设置。
一、检测是否支持StyleSheet类型操作通过<link>元素和<style>元素包含的样式表。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); alert(document.implementation.hasFeature('StyleSheets', '2.0')); //检测是否支持 链接式或内联式样式表 alert(document.getElementsByTagName('link')[0]); //HTMLLinkElement ,如果没有时undefined alert(document.getElementsByTagName('style')[0]); //HTMLStyleElement ,如果没有时undefined } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
二、获取CSSStyleSheet对象
这两个元素本身返回的是 HTMLLinkElement 和 HTMLStyleElement 类型，但CSSStyleSheet 类型更加通用一些。得到这个类型非 IE 使用 sheet 属性，IE 使用 styleSheet；
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); var style = document.getElementsByTagName('style')[0]; //var sheet = style.sheet;//IE6,7,8不支持 //var sheet = style.styleSheet;//非IE不支持 //做兼容 var sheet = style.sheet || style.styleSheet; //得到 CSSStyleSheet alert(sheet); } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
除了上面的方法可以得到 CSSStyleSheet 类型，还有一种方法是通过 document 的styleSheets 属性来获取。所有浏览器都兼容的
<script type="text/javascript"> window.onload = function(){ //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合 var sheet = document.styleSheets[0];//得到第一个CSS样式表对象 alert(sheet); } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
三、CSSStyleSheet对象的属性和方法
<script type="text/javascript"> window.onload = function(){ //var sheet = document.styleSheets; //得到的[object StyleSheetList]集合 var sheet = document.styleSheets[0]; //得到第一个CSS样式表对象 //alert(sheet.disabled); //false，可设置为 true，设置为true后样式被禁用，网页的样式也就没有了 //alert(sheet.href); //css 的 URL,如果是内联样式表，不是使用link链接进来的为null //alert(sheet.media); //MediaList，集合 支持度也不是很好 //alert(sheet.media[0]); //第一个 media 的值 //alert(sheet.title); //得到 title 属性的值 alert(sheet.cssRules); //CSSRuleList，样式表规则集合 样式规则就是一群样式表示一个规则 alert(sheet.cssRules[0]); //得到的第一个规则，还是一个集合 alert(sheet.cssRules[0].cssText); //把第一个规则的css文本即所有属性和值获取到 alert(sheet.cssRules[0].selectorText); //得到第一个规则的css选择符 //sheet.deleteRule(0); //删除第一个样式规则 sheet.insertRule("body {background-color:red}", 0); //在第一个位置添加一个样式规则 } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
cssRules、deleteRule、insertRule这三个方法IE6,7,8不支持，可以使用下面的替代方法，但只能支持IE
<script type="text/javascript"> window.onload = function(){ //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合 var sheet = document.styleSheets[0];//得到第一个CSS样式表对象 alert(sheet.rules); //代替 cssRules 的 IE 版本 sheet.removeRule(0); //代替 deleteRule 的 IE 版本 sheet.addRule("body", "background-color:red", 0); //代替 insertRule 的 IE 版本 } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
跨浏览器兼容
<script type="text/javascript"> window.onload = function(){ //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合 var sheet = document.styleSheets[0];//得到第一个CSS样式表对象 //跨浏览器兼容获取rules var rules = sheet.cssRules || sheet.rules; alert(rules); //跨浏览器兼容删除某条规则 position这个参数表示第一条规则 function deleteRule(sheet,position){ if(sheet.deleteRule){ sheet.deleteRule(position); }else if(sheet.removeRule){ sheet.removeRule(position); } } //跨浏览器兼容按参数添加一条规则 //第一个参数表示sheet（那个CSS文本对象）第二个参数是选择符，第三个参数表示css样式文本，第四个参数表示插入的位置 function insertRule(sheet,selectorText,cssText,position){ if(sheet.insertRule){ sheet.insertRule(selectorText+"{"+cssText+"}", position); }else if(sheet.addRule){ sheet.addRule(selectorText,cssText,position); } } } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
四、Rules 属性
通过 CSSRules 属性(非 IE)和 rules 属性(IE)，我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。
<script type="text/javascript"> window.onload = function(){ var sheet = document.styleSheets[0]; //CSSStyleSheet var rules = sheet.cssRules || sheet.rules; //CSSRuleList，样式表的规则集合列表 var rule = rules[0]; //CSSStyleRule，样式表第一个规则 alert(rule.cssText); //当前规则的样式文本 alert(rule.selectorText); //#box，样式的选择符 alert(rule.style.color); //red，得到具体样式值 //Chrome 浏览器在本地运行时会出现问题，rules 会变成 null，只要把它放到服务器上允许即可正常。 } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
五、总结三种操作 CSS 的方法
第一种 ：通过style属性操作行内样式，可读可写；
第二种：通过计算后的样式操作行内、内联和链接，使用 getComputedStyle 或 currentStyle，可读不可写；
第三种 cssRules 或 rules，内联和链接可读可写。