整理CSSStyleSheet相關的屬性

Joyven 發布于2019-08-28 18:30 / 2783人閱讀

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

所有代碼均在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()

相關的屬性：

//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"
        }
    }
]);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111276.html

整理CSSStyleSheet相關的屬性

摘要：是規則的索引，從開始，如果數值超出了則添加到最后，也可傳入添加到最后。是一個數組，中的鍵值對按照規則書寫。所有代碼均在Chrome下測試獲取樣式表-StyleSheet //方法一 var styleSheets = document.styleSheets; //styleSheets.length可返回樣式表的個數 var styleSheet = document.style...

Yu_Huang 2019-08-19 17:27 評論0 收藏0
可構造樣式表 - 通過javascript來生成css的新方式

摘要：可構造樣式表是一種使用進行創建和分發可重用樣式的新方法。它甚至可以直接用于瀏覽器解析器直接的接口，無需將他們注入到就可以很輕易的加載樣式表。構建一個樣式表與引入一個新不同，可構造樣式表規范使得其可以通過調用構造函數來強制創建樣式表。可構造樣式表是一種使用Shadow DOM進行創建和分發可重用樣式的新方法。使用Javascript來創建樣式表是可能的。然而，這個過程在歷史上一直是使...

ConardLi 2019-08-23 15:17 評論0 收藏0
JavaScript DOM2和DOM3——“樣式”的注意要點

摘要：如計算的樣式方法和屬性前者是增強了，這個方法接收兩個參數計算樣式的元素以及一個偽元素字符串如。操作表樣式類型表示的是樣式表，包括元素包含的樣式表和在元素中定義的樣式表。層次：訪問style對象： style對象是CSSStyleDeclaration的實例； getComputedStyle方法也返回CSSStyleDeclaration的實例；訪問樣式表：元素包含的樣式表...

whjin 2019-08-19 17:15 評論0 收藏0
JavaScript DOM2和DOM3——“樣式”的注意要點

摘要：如計算的樣式方法和屬性前者是增強了，這個方法接收兩個參數計算樣式的元素以及一個偽元素字符串如。操作表樣式類型表示的是樣式表，包括元素包含的樣式表和在元素中定義的樣式表。層次：訪問style對象： style對象是CSSStyleDeclaration的實例； getComputedStyle方法也返回CSSStyleDeclaration的實例；訪問樣式表：元素包含的樣式表...

Jason_Geng 2019-08-28 18:28 評論0 收藏0
DOM擴展,DOM2和DOM3

摘要：擴展選擇符的核心是兩個方法和。目前已完全支持的瀏覽器有和。在寫模式下，會根據指定的字符串創建新的子樹，然后用這個子樹完全替換調用元素。在刪除帶有事件處理程序或引用了其他對象子樹時，就有可能導致內存占用問題。刪除集合中指定位置的規則。 DOM擴展選擇符API Selectors API Level 1 的核心是兩個方法：querySelector()和querySelectorAll(...

suxier 2019-08-21 10:45 評論0 收藏0