早上在csdn上看有人问页面style sheet怎么修改里面的rule,就写了个类,该类对兼容FF和IE做了处理。
/**/
/*--------------------------------------------
描述 : 添加新的样式rule
参数 : styleSheets索引
代码 : var ss = new styleSheet(0);
--------------------------------------------*/
var
styleSheet
=
function
(n)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var ss;
if (typeof n == "number") ss = document.styleSheets[n];
this.sheet = ss;
this.rules = ss.cssRules?ss.cssRules:ss.rules;
}
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*--------------------------------------------
描述 : 查找样式rule,成功返回index,否则返回-1
参数 : n为rule名称
代码 : var ss = new styleSheet(0);
ss.indexOf("className")
--------------------------------------------*/
styleSheet.prototype.indexOf
=
function
(selector)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
for(var i=0;i<this.rules.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(this.rules[i].selectorText==selector)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return i;
}
}
return -1;
}
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*--------------------------------------------
描述 : 删除样式rule
参数 : n为rule索引或者名称
代码 : var ss = new styleSheet(0);
ss.removeRule(0) || ss.removeRule("className")
--------------------------------------------*/
styleSheet.prototype.removeRule
=
function
(n)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(typeof n == "number")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(n<this.rules.length)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.sheet.removeRule?this.sheet.removeRule(n):this.sheet.deleteRule(n);
}
}else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var i = this.indexOf(n);
this.sheet.removeRule?this.sheet.removeRule(i):this.sheet.deleteRule(i);
}
}
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*--------------------------------------------
描述 : 添加新的样式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)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(typeof n == "undefined")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
n = this.rules.length;
}
this.sheet.insertRule?this.sheet.insertRule(selector + "{" + styles + "}", n):this.sheet.addRule(selector, styles, n);
}
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*--------------------------------------------
描述 : 设置样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
_value 指定value值
代码 : var ss = new styleSheet(0);
ss.setRuleStyle("className","color:","green");
--------------------------------------------*/
styleSheet.prototype.setRuleStyle
=
function
(selector,attribute,_value)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var i = this.indexOf(selector);
this.rules[i].style[attribute] = _value;
}
;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
/**/
/*--------------------------------------------
描述 : 获得样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
代码 : var ss = new styleSheet(0);
ss.getRuleStyle("className","color");
--------------------------------------------*/
styleSheet.prototype.getRuleStyle
=
function
(selector,attribute)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var i = this.indexOf(selector);
return this.rules[i].style[attribute];
}
;
使用的例子,使用setRuleStyle方法将#pid的color改成green
<
style
type
="text/css"
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
#pid {...}{color: red;}
</
style
>
<
p
id
="pid"
>
22
</
p
>
<
input
type
="button"
onclick
="test()"
value
=" test "
/>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="javascript"
type
="text/javascript"
>
...
function test()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var sheet = new styleSheet(0);
sheet.setRuleStyle("#pid","color","green");
}
</
script
>