javascript StyleSheet样式操作类

早上在csdn上看有人问页面style sheet怎么修改里面的rule,就写了个类,该类对兼容FF和IE做了处理。

/**/ /*--------------------------------------------
    描述 : 添加新的样式rule
    参数 : styleSheets索引
    代码 : var ss = new styleSheet(0);
--------------------------------------------*/
var  styleSheet  =   function (n)
... {
    var ss;
    if (typeof n == "number") ss = document.styleSheets[n];
    this.sheet = ss;
    this.rules = ss.cssRules?ss.cssRules:ss.rules;
} ;

/**/ /*--------------------------------------------
    描述 : 查找样式rule，成功返回index,否则返回-1
    参数 : n为rule名称
    代码 : var ss = new styleSheet(0);
          ss.indexOf("className")
--------------------------------------------*/
styleSheet.prototype.indexOf  =   function (selector)
... {
    for(var i=0;i<this.rules.length;i++)
    ...{
        if(this.rules[i].selectorText==selector)
        ...{
            return i;
        }
    }
    return -1;
} ;



/**/ /*--------------------------------------------
    描述 : 删除样式rule
    参数 : n为rule索引或者名称
    代码 : var ss = new styleSheet(0);
          ss.removeRule(0) || ss.removeRule("className")
--------------------------------------------*/
styleSheet.prototype.removeRule  =   function (n)
... {
    if(typeof n == "number")
    ...{
        if(n<this.rules.length)
        ...{
            this.sheet.removeRule?this.sheet.removeRule(n):this.sheet.deleteRule(n);
        }
    }else
    ...{
        var i = this.indexOf(n);
        this.sheet.removeRule?this.sheet.removeRule(i):this.sheet.deleteRule(i);
       
    }
} ;

/**/ /*--------------------------------------------
    描述 : 添加新的样式rule
    参数 : selector      样式rule名称
          styles        样式rule的style
          n             位置
    代码 : var ss = new styleSheet(0);
          ss.addRule("className","color:red",0);
--------------------------------------------*/
styleSheet.prototype.addRule  =   function (selector,styles,n)
... {
    if(typeof n == "undefined")
    ...{
        n = this.rules.length;
    }
    this.sheet.insertRule?this.sheet.insertRule(selector + "{" + styles + "}", n):this.sheet.addRule(selector, styles, n);
   
} ;

/**/ /*--------------------------------------------
    描述 : 设置样式rule具体的属性
    参数 : selector      样式rule名称
          attribute     样式rule的属性
          _value        指定value值
    代码 : var ss = new styleSheet(0);
           ss.setRuleStyle("className","color:","green");
--------------------------------------------*/
styleSheet.prototype.setRuleStyle  =   function (selector,attribute,_value)
... {
    var i = this.indexOf(selector);
    this.rules[i].style[attribute] = _value;
} ;

/**/ /*--------------------------------------------
    描述 : 获得样式rule具体的属性
    参数 : selector      样式rule名称
          attribute      样式rule的属性
    代码 : var ss = new styleSheet(0);
          ss.getRuleStyle("className","color");
--------------------------------------------*/
styleSheet.prototype.getRuleStyle  =   function (selector,attribute)
... {
    var i = this.indexOf(selector);
    return this.rules[i].style[attribute];
} ;

使用的例子，使用setRuleStyle方法将#pid的color改成green

< style  type ="text/css"   > ...  
#pid {...}{color: red;} 
</ style >  
< p  id ="pid" > 22  </ p  >  
< input  type ="button"  onclick ="test()"  value =" test "   />
< script  language ="javascript"  type ="text/javascript"   > ...  
function test()
...{
    var sheet = new styleSheet(0);
    sheet.setRuleStyle("#pid","color","green");
}
</ script >