javascript操作styleSheet样式的例子

代码如下	复制代码
0: CSSStyleSheet cssRules: CSSRuleList 0: CSSStyleRule length: 1 __proto__: CSSRuleList disabled: false href: null media: MediaList ownerNode: style ownerRule: null parentStyleSheet: null rules: CSSRuleList title: null type: "text/css" __proto__: CSSStyleSheet

这个是cssRule的DOM结构
disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表。
href：如果样式表是通过包含的，则是样式表的URL；否则，是null。
media：当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中特定的项。如果集合是空列表项，表示样式表适用于所有媒体。在IE中，media是一个反映和

代码如下	复制代码
if (document.styleSheets[0].cssRules) { //div {background: red; } alert(document.styleSheets[0].cssRules[1].selectorText + ":" + document.styleSheets[0].cssRules[1].style.cssText + " cssRules"); } else { //header {width: 100%; height:100px; } alert(document.styleSheets[0].rules[1].selectorText + ":" + document.styleSheets[0].rules[1].style.cssText + " rules"); }

1. ie9及以上,chrome,firefox document.styleSheets[0].cssRules[1].selectorText //结果是div
2. ie9以下 document.styleSheets[0].rules[1].selectorText //结果是header 区别如下
1.cssRules , 和 rules的区别
2.计数方式不一样,在第一种情况下cssRules中的元素按照一条条的css规则计数 '#content, header {width: 100%; }' 第0条 , 'div {background: red; }' 第1条 而在第二种情况下是按照选择器计数,multiple selector 的规则会被拆分成几条 #content {width: 100%; } 第0条, header {width: 100%; } 第一条,div {background: red; }' 第2条

insertRule()与addRule()创建规则
要向现有的样式表中添加新规则，需要使用insertRule()方法。这个方法接受两个参数：规则文本和表示在那里插入规则的索引。下面是一个例子：
sheet.insertRule("body { background-color: silver }", 0); //Firefox、Safari、Opera和Chrome都支持insertRule()方法。
IE支持一个类似的方法，名叫addRule，也接受两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。在IE中插入与前面例子相同的规则，可使用如下代码：
sheet.addRule("body", "background-color: silver", 0); //对IE有效
要以跨浏览器的方式向样式表中插入规则，可以使用下面的函数。这个函数接受4个参数：要向其中添加规则的样式表以及与addRule()相同的3个参数，如下所示：

代码如下	复制代码
function insertRule(sheet, selectorText, cssText, position) { if (sheet.insertRule) { sheet.insertRule(selectorText + "{" + cssText + "}", position); } else if (sheet.addRule) { sheet.addRule(selectorText, cssText, poistion); } } insertRule(document.styleSheets[0], "body", "background-color: silver", 0);

deleteRule()与removeRule()删除规则
从样式表中删除规则的方法是deleteRule()，这个方法接受一个参数：要删除的规则的位置。例如，要删除样式表中的第一条规则，可以使用以下代码：
sheet.deleteRule(0); //DOM方法
IE支持的类似方法叫removeRule()，使用方法相同，如下所示：
sheet.removeRule(0); //对IE有效
下面是一个能够跨浏览器删除规则的函数。第一个参数是要操作的样式表，第二个参数是要删除的规则索引：

代码如下	复制代码
function deleteRule(sheet, index) { if (sheet.deleteRule) { sheet.deleteRule(index); } else if (sheet.removeRule) { sheet.removeRule(index); } } deleteRule(document.styleSheet[0], 0);

最新版的IE和CHROME 这四个方法都支持.具体的大家在浏览器里面console.dir(document.styleSheets[0]);看吧