[转]javascript跨浏览器操作stylesheet

       使用javascript直接操作stylesheet目前应用并不多；替代的做法是加载静态样式表，然后动态修改元素的className属性。在这里出于学习的目的，摘录出来。

      2级DOM定义了标准的API来查询、操作和遍历样式表本身，目前现代浏览器有firfox支持该API；同时IE也定义了自己的API来查询、操作和遍历样式表，关于查询、操作和遍历样式表的细节请参阅《javascript权威指南第五版》16.6.2章节。下面的代码在firefox，IE和Opera下均可以正常运行。

              <script type="text/javascript">

 

                     function Stylesheet(ss){

                            if(typeof ss == "number") ss = document.styleSheets[ss];//获取CSSStyleSheet对象

                            this.ss = ss;

                     }

                    

                     //获取整个样式表对象

                     Stylesheet.prototype.getRules = function(){

                            return this.ss.cssRules?this.ss.cssRules:this.ss.rules;//firefox : IE

                     };

                    

                     //获取某个特定样式选择器

                     Stylesheet.prototype.getRule = function(s){

                            var rules = this.getRules();

                            if(!rules) return null;

                            if(typeof s == "number") return rules[s];

                            s = s.toLowerCase();

                            for(var i=rules.length-1; i>=0; i--){

                                   if(rules[i].selectorText.toLowerCase() == s) return rules[i];

                            }

                            return null;

                     };

                    

                     //获取某个特定样式选择器下的所有样式

                     Stylesheet.prototype.getStyles = function(s){

                            var rule = this.getRule(s);

                            if(rule && rule.style) return rule.style;

                            else return null;

                     }

                    

                     //获取某个特定样式选择器下的某个样式属性

                     Stylesheet.prototype.getStyleText = function(s){

                            var rule = this.getRule(s);

                            if(rule && rule.style && rule.style.cssText) return rule.style.cssText;

                            else return "";

                     };

                    

                     //插入新的样式选择器和样式

                     Stylesheet.prototype.insertRule = function(selector, styles, n){

                            if(n == undefined){

                                   var rules = this.getRules;

                                   n = rules.length;

                            }

                            if(this.ss.insertRule)

                                   this.ss.insertRule(selector + "{" + styles + "}", n);

                            else if(this.ss.addRule){

                                   this.ss.addRule(selector, styles, n)

                            }

                     };

                    

                     //删除样式选择器和样式

                     Stylesheet.prototype.deleteRule = function(s){

                            if(s == undefined){

                                   var rules = this.getRules;

                                   s = rules.length-1;

                            }

                           

                            if(typeof s != "number"){

                                   s = s.toLowerCase();

                                   var rules = this.getRules();

                                   for(var i=rules.length-1; i>=0; i--){

                                          if(rules[i].selectorText.toLowerCase() == s){

                                                 s = i;

                                                 break;

                                          }

                                   }

                                  

                                   if(i == -1) return;

                            }

                           

                            if(this.ss.deleteRule) this.ss.deleteRule(s);

                            else if(this.ss.removeRule) this.ss.removeRule(s);

                     };

                    

              </script>

参考文献：《javascript权威指南第五版》