动态样式类封装JS代码

//CssRule类由StyleSheet.getRule方法返回，不直接创建
functionCssRule(rule){
this.rule=rule;
this.style=rule.style;
this.selectorText=rule.selectorText;
this.index=null;
}
functionStyleSheet(){
varhead=document.getElementsByTagName("head")[0];
//通过新建标签来创建新样式
/*
在此不用document.createStyleSheet来完成，是因为在FF下
如果未导入任何CSS文件的情况下document.createStyleSheet方法失败
*/
varstyle=document.createElement("style");
style.type="text/css";
head.appendChild(style);
this.CatchStyle(document.styleSheets.length-1);
}
StyleSheet.prototype={
//可直接捕获现有Style
CatchStyle:function(index){
this.style=document.styleSheets[index];
if(navigator.userAgent.indexOf("MSIE")<0){//非IE浏览器补丁
this.style.addRule=function(selector,style){
varindex=this.cssRules.length;
this.insertRule(selector+"{"+style+"}",index);
};
this.style.removeRule=function(index){
this.deleteRule(index);
};
}
},
//新增样式
AddRule:function(selector,style){
this.style.addRule(selector,style);
},
//删除样式
RemoveRule:function(index){
this.style.removeRule(index);
},
//取得所有样式
getRules:function(){
if(this.style.rules){//IE
returnthis.style.rules;
}
returnthis.style.cssRules;//非IE
},
//通过选择器，取得样式
getRule:function(selector){
varrules=this.getRules();
for(vari=0;i<rules.length;i++){
varr=rules[i];
if(r.selectorText==selector){
varrule=newCssRule(r);
rule.index=i;
returnrule;
}
}
returnnull;
}
};