国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Joyven / 2778人閱讀

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

所有代碼均在Chrome下測(cè)試
獲取樣式表-StyleSheet 
//方法一
var styleSheets = document.styleSheets; //styleSheets.length可返回樣式表的個(gè)數(shù)
var styleSheet = document.styleSheets[index];
//方法二
var styleSheet = document.getElementsByTagName("link")[index].sheet;
var styleSheet = document.getElementsByTagName("style")[index].sheet;

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

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

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

相關(guān)的屬性：





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

styleSheet.deleteRule(index);
styleSheet.removeRule(index);
styleSheet.insertRule(string, index);//一次只能添加一個(gè)CSSRule
//例如
styleSheet.insertRule(".red {color: red;}", 0);//添加到第一個(gè)
styleSheet.insertRule(".red {color: red;}", styleSheet.rules.length);//添加到最后一個(gè)
獲取CSS規(guī)則-CSSRule 
var cssRules = styleSheet.cssRules; //cssRules.length可返回CSS規(guī)則的個(gè)數(shù)
var cssRules = styleSheet.rules;
var cssRule = cssRules[index];

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

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

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

相關(guān)的屬性：

/*這是三個(gè)CSSRule*/
.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}
//javascript獲取一個(gè)樣式，及相關(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可返回花括弧中樣式的個(gè)數(shù)

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

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

相關(guān)的屬性：

/*這是一個(gè)CSSRule，里面有三個(gè)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則取最后一個(gè)樣式表，也可以傳入"default"取最后一個(gè)樣式表。

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

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

例如：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111276.html

相關(guān)文章

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

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

    Yu_Huang 評(píng)論0 收藏0

  • 可構(gòu)造樣式表 - 通過(guò)javascript來(lái)生成css的新方式

    摘要：可構(gòu)造樣式表是一種使用進(jìn)行創(chuàng)建和分發(fā)可重用樣式的新方法。它甚至可以直接用于瀏覽器解析器直接的接口，無(wú)需將他們注入到就可以很輕易的加載樣式表。構(gòu)建一個(gè)樣式表與引入一個(gè)新不同，可構(gòu)造樣式表規(guī)范使得其可以通過(guò)調(diào)用構(gòu)造函數(shù)來(lái)強(qiáng)制創(chuàng)建樣式表。 可構(gòu)造樣式表是一種使用Shadow DOM進(jìn)行創(chuàng)建和分發(fā)可重用樣式的新方法。 使用Javascript來(lái)創(chuàng)建樣式表是可能的。然而，這個(gè)過(guò)程在歷史上一直是使...

    ConardLi 評(píng)論0 收藏0

  • JavaScript DOM2和DOM3——“樣式”的注意要點(diǎn)

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

    whjin 評(píng)論0 收藏0

  • JavaScript DOM2和DOM3——“樣式”的注意要點(diǎn)

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

    Jason_Geng 評(píng)論0 收藏0

  • DOM擴(kuò)展,DOM2和DOM3

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

    suxier 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<