整理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'
        }
    }
]);