整理CSSStyleSheet相關(guān)的屬性

Yu_Huang 發(fā)布于2019-08-19 17:27 / 1491人閱讀

摘要：是規(guī)則的索引，從開始，如果數(shù)值超出了則添加到最后，也可傳入添加到最后。是一個數(shù)組，中的鍵值對按照規(guī)則書寫。

所有代碼均在Chrome下測試

獲取樣式表-StyleSheet

//方法一
var styleSheets = document.styleSheets; //styleSheets.length可返回樣式表的個數(shù)
var styleSheet = document.styleSheets[index];
//方法二
var styleSheet = document.getElementsByTagName("link")[index].sheet;
var styleSheet = document.getElementsByTagName("style")[index].sheet;

相對應(yīng)的對象類型：

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

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

相關(guān)的屬性：

//javascript獲取一個樣式表，及相關(guān)屬性
var styleSheet = styleSheets[2];
styleSheet.ownerNode//返回link節(jié)點，或者style節(jié)點

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規(guī)則-CSSRule

var cssRules = styleSheet.cssRules; //cssRules.length可返回CSS規(guī)則的個數(shù)
var cssRules = styleSheet.rules;
var cssRule = cssRules[index];

相對應(yīng)的對象類型：

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

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

相關(guān)的屬性：

/*這是三個CSSRule*/
.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}

//javascript獲取一個樣式，及相關(guān)屬性
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可返回花括弧中樣式的個數(shù)

相對應(yīng)的對象類型：

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

相關(guān)的屬性：

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

//用javascript獲取花括弧中的樣式，以及相關(guān)的屬性
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開始，如果數(shù)值超出了styleSheets.length - 1則取最后一個樣式表，也可以傳入"default"取最后一個樣式表。

crIndex是CSS規(guī)則的索引，從0開始，如果數(shù)值超出了cssRules.length則添加到最后，也可傳入"default"添加到最后。

styleSheetRules是一個數(shù)組，styles中的鍵值對按照CSS規(guī)則書寫。

例如：

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