自定义类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);

};