自定义类StyleSheet跨浏览器操作样式表中的规则
这是群里网友地瓜提供的一个类,不熟悉样式表对象和样式规则对象的浏览器差异的可以看看
/** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross-platform methods for querying and modifying the stylesheet. **/ // Construct a new Stylesheet object that wraps the specified CSSStylesheet. // If ss is a number, look up the stylesheet in the styleSheet[] array. function Stylesheet(ss) { //~~~document.styleSheets if (typeof ss == "number") ss = document.styleSheets[ss]; this.ss = ss; } // Return the rules array for this stylesheet. Stylesheet.prototype.getRules = function() { // Use the W3C property if defined; otherwise use the IE property //~~~stylesheet.cssRules(w3c) , stylesheet.rules(ie) return this.ss.cssRules?this.ss.cssRules:this.ss.rules; } // Return a rule of the stylesheet. If s is a number, we return the rule // at that index. Otherwise, we assume s is a selector and look for a rule // that matches that selector. Stylesheet.prototype.getRule = function(s) { var rules = this.getRules(); if (!rules) return null; if (typeof s == "number") return rules[s]; // Assume s is a selector // Loop backward through the rules so that if there is more than one // rule that matches s, we find the one with the highest precedence. s = s.toLowerCase(); for(var i = rules.length-1; i >= 0; i--) { //~~~~rule.selectorText if (rules[i].selectorText.toLowerCase() == s) return rules[i]; } return null; }; // Return the CSS2Properties object for the specified rule. // Rules can be specified by number or by selector. Stylesheet.prototype.getStyles = function(s) { var rule = this.getRule(s); //~~~rule.style(like the element.style, is a styleDeclearation) if (rule && rule.style) return rule.style; else return null; }; // Return the style text for the specified rule. Stylesheet.prototype.getStyleText = function(s) { var rule = this.getRule(s); //~~~rule.style.cssText(just like element.style.cssText) if (rule && rule.style && rule.style.cssText) return rule.style.cssText; else return ""; }; // Insert a rule into the stylesheet. // The rule consists of the specified selector and style strings. // It is inserted at index n. If n is omitted, it is appended to the end. Stylesheet.prototype.insertRule = function(selector, styles, n) { if (n == undefined) { var rules = this.getRules(); n = rules.length; } if (this.ss.insertRule) // Try the W3C API first //~~~stylesheet.insertRule(ruleText,index) w3c, //~~~stylesheet.addRule(selector,cssText,index) ie this.ss.insertRule(selector + "{" + styles + "}", n); else if (this.ss.addRule) // Otherwise use the IE API this.ss.addRule(selector, styles, n); }; // Remove the rule from the specified position in the stylesheet. // If s is a number, delete the rule at that position. // If s is a string, delete the rule with that selector. // If s is not specified, delete the last rule in the stylesheet. Stylesheet.prototype.deleteRule = function(s) { // If s is undefined, make it the index of the last rule if (s == undefined) { var rules = this.getRules(); s = rules.length-1; } // If s is not a number, look for a matching rule and get its index. if (typeof s != "number") { s = s.toLowerCase(); // convert to lowercase var rules = this.getRules(); for(var i = rules.length-1; i >= 0; i--) { if (rules[i].selectorText.toLowerCase() == s) { s = i; // Remember the index of the rule to delete break; // And stop searching } } // If we didn't find a match, just give up. if (i == -1) return; } // At this point, s will be a number. // Try the W3C API first, then try the IE API //~~~stylesheet.deleteRule(index) w3c //~~~stylesheet.removeRule(index) ie if (this.ss.deleteRule) this.ss.deleteRule(s); else if (this.ss.removeRule) this.ss.removeRule(s); };