Table of Contents

1.document.styleSheets

document.styleSheets获取的是包含所有的样式表的[object StyleSheetList]，具有length属性，表示样式表的数量
通过document.styleSheets[0]获取[object CSSStyleSheet]样式表对象.

也可以通过如下方法获取样式表对象

  function getStyleSheet(element){
        return element.sheet||element.styleSheet;
        //其他浏览器支持sheet,ie支持styleSheet来取得样式表对象
      }
var link=document.getElementsByTagName("link")[0];
var sheet=hetStyleSheet(link);

关于获取到的sheet与document.styleSheets的关系
console.log(sheet==document.styleSheets[0])；//true

2.包含CSS规则（[object CSSRuleList]）

2.1 CSSRule对象

表示样式表中的每一条规则，[object CSSStyleRule]对象包含以下常用属性：

2.1.1 cssText,

返回整条规则对应的文本，ie9+才支持,只读属性

2.1.2 selectorText,

返回当前规则的选择符文本，例如#box

2.1.3 style，

这是一个CSSStyleDeclaration 。 style.cssText,返回样式信息
测试代码：

var sheets=document.styleSheets;//[object StyleSheetList集合
var sheet=sheets[0];//[object CSSStyleSheet],样式表
var rules=sheet.cssRules||sheet.rules;//单个样式表中的所有规则
var rule=rules[0];//样式表表中的第一条规则
console.log(rules);//[object CSSRuleList]
console.log(rule);//[object CSSStyleRule]
rule.cssText="#box { width:300px; height: 200px; background: red; }"
//设置无效
console.log(rule.cssText);
//返回包含选择符文本和围绕样式信息的花括号，只读属性,ie9+才支持
//"#box { width: 200px; height: 200px; background: red; }"
var sty=document.getElementById("sty");
var she=sty.sheet||sty.styleSheet;
console.log(she==sheets[0])//true

2.2创建规则，向现有样式表中添加新规则

2.2.1 insertRule()方法

接收2个参数，规则文本和表示在哪里插入规则的索引，ie9以下不支持

2.2.2 addRule()方法

//接收3个参数，选择符文本和CSS样式信息，一个可选参数：插入规则的位置。仅对ie有效,最多可以使用addRule()添加4095条样式规则，超出这个上限的调用将出错。

2.2.3跨浏览器添加规则

var sheet=document.styleSheets[0];
  function insertRules(sheet,selectorText,cssText,position){
    sheet.insertRule?sheet.insertRule(selectorText
      +"{"+cssText+"}",position):sheet.addRule(selectorText,cssText,position);
  }
  insertRules(sheet,"body","background:blue",0);

2.3.1删除规则：从样式表中删除规则

2.3.2 deleteRule()

接收一个参数，要删除的规则的位置

2.3.3removeRule();

第一个参数是要删除的规则的索引。仅ie支持

2.3.4 跨浏览器删除规则

var sheet=document.styleSheets[0];
  function deleteRule(sheet,index){
sheet.deleteRule?sheet.deleteRule(index):sheet.removeRule(index);
}
deleteRule(sheet,0);

Tags: js