这是群里网友地瓜提供的一个类，不熟悉样式的浏览器差异的可以看看
/**
* 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--) {
//~~~~rules.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);
};
自定义类StyleSheet跨浏览器操作样式表中的规则