整理CSSStyleSheet相关的属性

所有代码均在Chrome下测试

获取样式表-StyleSheet

//方法一
var styleSheets = document.styleSheets; //styleSheets.length可返回样式表的个数
var styleSheet = document.styleSheets[index];
//方法二
var styleSheet = document.getElementsByTagName('link')[index].sheet;
var styleSheet = document.getElementsByTagName('style')[index].sheet;

相对应的对象类型：

• styleSheets --------------------- StyleSheetList()

• styleSheet ---------------------- CSSStyleSheet()

相关的属性：

<!--这是三个StyleSheet-->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css"></style>

//javascript获取一个样式表，及相关属性
var styleSheet = styleSheets[2];
styleSheet.ownerNode//返回link节点，或者style节点

styleSheet.deleteRule(index);
styleSheet.removeRule(index);
styleSheet.insertRule(string, index);//一次只能添加一个CSSRule
//例如
styleSheet.insertRule('.red {color: red;}', 0);//添加到第一个
styleSheet.insertRule('.red {color: red;}', styleSheet.rules.length);//添加到最后一个

获取CSS规则-CSSRule

var cssRules = styleSheet.cssRules; //cssRules.length可返回CSS规则的个数
var cssRules = styleSheet.rules;
var cssRule = cssRules[index];

相对应的对象类型：

• cssRules --------------------- CSSRuleList()

• cssRule ---------------------- CSSStyleRule()

相关的属性：

/*这是三个CSSRule*/
.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}

//javascript获取一个样式，及相关属性
var cssRule = cssRules[0];
cssRule.cssText === '.red { color: red; }'
cssRule.selectorText === '.red'

cssRule.parentRule === null
cssRule.parentStyleSheet === styleSheet

获取花括弧中的样式-{//style}

var styles = cssRule.style; //styles.length可返回花括弧中样式的个数

相对应的对象类型：

• styles --------------------- CSSStyleDeclaration()

相关的属性：

/*这是一个CSSRule，里面有三个style*/
.font {
    color : red;
    font-size : 20px;
    font-weight : bold;
}

//用javascript获取花括弧中的样式，以及相关的属性
var styles = cssRule.style;
styles.cssText === 'color : red;font-size : 20px;font-weight : bold;' //可修改
styles.length === 3
styles[0] === 'color' //不可修改
styles[1] === 'font-size' //不可修改
styles[2] === 'font-weight' //不可修改
styles.color === 'red' //可修改
styles.fontSize === '20px' //可修改
styles.fontWeight === 'bold' //可修改

styles.parentRule === cssRule

向样式表中添加CSSRule

function addCSSRules(ssIndex, crIndex, styleSheetRules){
    var default_ssIndex = document.styleSheets.length - 1;
    ssIndex = ssIndex === 'default'? default_ssIndex: ssIndex > default_ssIndex? default_ssIndex: ssIndex;
    var styleSheet = document.styleSheets[ssIndex];
    var default_crIndex = styleSheet.cssRules.length;
    crIndex = crIndex === 'default'? default_crIndex: crIndex > default_crIndex? default_crIndex: crIndex;

    var i;
    for(i = 0; i < styleSheetRules.length; i++){
        var ruleText = styleSheetRules[i].selector + '{';
        for(var style in styleSheetRules[i].styles){
            ruleText += style + ':' + styleSheetRules[i].styles[style] + ';';
        }
        ruleText += '}';
        styleSheet.insertRule(ruleText, crIndex);
        crIndex++;
    }
}

• ssIndex是样式表的索引，从0开始，如果数值超出了styleSheets.length - 1则取最后一个样式表，也可以传入'default'取最后一个样式表。

• crIndex是CSS规则的索引，从0开始，如果数值超出了cssRules.length则添加到最后，也可传入'default'添加到最后。

• styleSheetRules是一个数组，styles中的键值对按照CSS规则书写。

例如：

addCSSRules(4, 'default', [
    {
        selector: '.insert',
        styles: {
            color: 'silver',
            'font-size': '20px'
        }
    },
    {
        selector: '#add',
        styles: {
            width: '120px',
            'background-color': '#ff4'
        }
    }
]);