深入理解腳本化CSS系列第四篇——腳本化樣式表 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　關于腳本化CSS，查詢樣式時，查詢的是計算樣式；設置單個樣式時，設置的是行間樣式；設置多個樣式時，設置的是CSS類名。腳本化樣式表當然也是一種腳本化CSS的技術，雖然不經常使用，但有時卻非常有用。下面將詳細介紹腳本化樣式表的內容

CSSStyleSheet

　　CSSStyleSheet類型表示的是樣式表。我們知道，引入CSS一共有3種方式，包括行間樣式、內部樣式和外部樣式。其中，內部樣式和外部樣式分別通過<style>和<link>標簽以樣式表的形式引入，屬于CSSStyleSheet類型

styleSheet

　　CSSStyleSheet對象只是一個類數組對象，它繼承自Stylesheet

　　樣式表CSSStyleSheet是通過document.styleSheets集合來表示的。通過集合的length屬性可以獲知樣式表的數量，而通過方括號語法或item()方法可以訪問毎一個樣式表

<style id="styleIn1"></style>

<script>
console.log(document.styleSheets[0] instanceof StyleSheet);//true
console.log(document.styleSheets[0] instanceof CSSStyleSheet);//true
</script>

<style id="styleIn1"></style>
<link id="styleOut" rel="stylesheet" href="style.css">
<style id="styleIn2"></style>

<script>
console.log(document.styleSheets.length);//3
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(document.styleSheets[0]);
//CSSStyleSheet {ownerRule: null, cssRules: null, rules: null, type: "text/css", href: "file:///C:/inetpub/wwwroot/style.css"…}
console.log(document.styleSheets[1]);
</script>

引入

　　除了使用document.styleSheets，還可以通過<link>或<style>元素的sheet屬性，取得CSSStyleSheet對象

　　[注意]IE8-瀏覽器不支持

<style id="test"></style>

<script>
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(test.sheet);
console.log(test.sheet=== document.styleSheets[0]);//true
</script>

　　IE10-瀏覽器支持<link>或<style>元素的styleSheet屬性，來取得CSSStyleSheet對象

<style id="test"></style>

<script>
//[object CSSStyleSheet]
console.log(test.styleSheet);
</script>

兼容　

function getSheet(element){
    return element.sheet || element.styleSheet;
}

繼承屬性

　　從Stylesheet接口繼承而來的屬性如下

【1】disabled

　　disabled表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置為true可以禁用樣式表

<style id="styleIn1">
#test{background-color: red!important;}
</style>

<div id="test" style="width: 100px;height: 100px;background-color: black;"></div>
<button id="btn1">變色</button>
<script>
btn1.onclick = function(){
    document.styleSheets[0].disabled = !document.styleSheets[0].disabled;
}
</script>

【2】href

　　如果樣式表是通過<link>包含的，則表示樣式表的URL；否則，是null

<style id="styleIn1"></style>
<link id="styleOut" rel="stylesheet" href="style.css">

<script>
console.log(document.styleSheets[0].href);//null
//file:///C:/inetpub/wwwroot/style.css
console.log(document.styleSheets[1].href);
</script>

【3】media

　　media屬性表示當前樣式表支持的所有媒體類型的集合MediaList。與所有DOM集合一樣，這個集合也有一個length屬性和一個item()方法。也可以使用方括號語法取得集合中特定的項。如果集合是空列表，表示樣式表適用于所有媒體。在IE8-瀏覽器中，media是一個反映<link>和<style>元素media特性值的字符串

<style media="all and (min-width:100px)">
.box{height: 100px;width: 100px;background-color: pink;}
</style>

<script>
//IE8-瀏覽器返回'all and (min-width:100px)'
//其他瀏覽器返回MediaList [ "all and (min-width: 100px)" ]
console.log(document.styleSheet[0].media);
</script>

【4】ownerNode

　　ownerNode屬性返回StyleSheet對象所在的DOM節點，通常是<link>或<style>。如果當前樣式表是其他樣式表通過@import導入的，則這個屬性值為null

　　[注意]IE8-瀏覽器不支持這個屬性

<style id="test"></style>
<script>
//<style id="test"></style>，IE8-瀏覽器返回undefined
console.log(document.styleSheets[0].ownerNode);
</script>

【5】parentStyleSheet

　　parentStyleSheet表示在當前樣式表是通過@import導入的情況下，這個屬性是一個指向導入它的樣式表的指針；否則為null

<style id="test"></style>
<script>
console.log(document.styleSheets[0].parentStyleSheet);//null
</script>

【6】title

　　title屬性表示ownerNode中title屬性的值

<style title="test"></style>
<script>
console.log(document.styleSheets[0].title);//test
</script>

【7】type

　　type屬性表示樣式表類型的字符串。對CSS樣式表而言，這個字符串是"type/css"

<style type="text/css"></style>
<script>
console.log(document.styleSheets[0].type);//'text/css'
</script>

　　[注意]若省略type屬性，默認為'text/css'，但IE8-瀏覽器輸出''

<style></style>
<script>
//IE8-瀏覽器輸出''，其他瀏覽器輸出'text/css'
console.log(document.styleSheets[0].type);
</script>

【8】cssText

　　cssText屬性返回樣式表中所有樣式的字符串表示，該屬性可讀寫，常常用于動態樣式的IE瀏覽器兼容處理，詳細情況移步至此

　　[注意]該屬性只有IE瀏覽器支持

<style id="test">
.box{height: 100px;}
div{height: 100px;}
</style>
<script>
var sheet = test.sheet || test.styleSheet;
//IE瀏覽器返回'.box{height: 100px;} div{height: 100px;}'
//firefox瀏覽器報錯
//其他瀏覽器返回undefined
console.log(sheet.cssText);
</script>

　　上面8個屬性中，除了disabled屬性和cssText屬性之外，其他屬性都是只讀的

自有屬性和方法

【1】cssRules

　　cssRules屬性表示樣式表中包含的樣式規則的集合

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>
<script>
//CSSRuleList {0: CSSStyleRule, length: 1}
console.log(document.styleSheets[0].cssRules);
</script>

　　IE8-瀏覽器不支持cssRules屬性，但有一個類似的rules屬性

　　[注意]firefox不支持rules屬性

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>
<script>
//CSSRuleList {0: CSSStyleRule, length: 1}
console.log(document.styleSheets[0].rules);
</script>

兼容

function rules(sheet){
    return sheet.cssRules || sheet.rules;
}

【2】ownerRule

　　如果樣式表是通過@import導入的，ownerRule屬性就是一個指針，指向表示導入的規則；否則，值為null

　　[注意]IE8-瀏覽器不支持這個屬性

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
console.log(document.styleSheets[0].ownerRule);//null
</script>

　　CSSStyleSheet對象的方法包括insertRule()、addRule()、deleteRule()和removeRule()，都用于操作CSSRule對象。于是把它們放在CSSRule對象的部分進行介紹

CSSRule對象

　　CSSRule對象表示樣式表中的每一條規則。實際上，CSSRule是一個供其他多種類型繼承的基類型，其中最常見的就是CSSStyleRule類型，表示樣式信息。其他規則還包括@import、@font-face、@page和@charset

　　CSSRule對象的列表通過CSSStyleSheets對象的cssRules屬性或ruls屬性得到

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
//CSSStyleRule {selectorText: ".box", style: CSSStyleDeclaration, type: 1, cssText: ".box { height: 100px; width: 100px; background-color: pink; }", parentRule: null…}
console.log(document.styleSheets[0].cssRules[0] || document.styleSheets[0].rules[0]);
</script>

屬性

　　CSSStyleRule對象包含下列屬性

【1】cssText

　　cssText屬性返回整條規則對應的文本

　　[注意]IE8-瀏覽器不支持

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
//'.box { height: 100px; width: 100px; background-color: pink; }'
console.log(rules[0].cssText);
</script>

【2】style

　　style屬性返回一個CSSStyleDeclaration對象，通過它設置和取得規則中特定的樣式值

　　這個CSSStyleDeclaration對象與行內元素的style屬性的CSSStyleDeclaration對象類似，具有相似的屬性和方法，詳細情況移步至此

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules || sheet.rules;
//CSSStyleDeclaration {0: "height", 1: "width", 2: "background-color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
console.log(rules[0].style);

/*[注意]style屬性下在cssText與CSSStyleRule對象下的cssText屬性不同 ，前者只報包含樣式信息，后者還包含選擇符文本和圍繞樣式信息的花括號*/

//'height: 100px; width: 100px; background-color: pink;'
console.log(rules[0].style.cssText)
//'.box { height: 100px; width: 100px; background-color: pink; }'
console.log(rules[0].cssText)
</script>

【3】selectorText

　　selectorText屬性返回當前規則的選擇符文本

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
console.log(rules[0].selectorText);//'.box'
</script>

【4】parentRule

　　如果當前規則是導入的規則，這個屬性引用的就是導入規則；否則，這個值為null

　　[注意]IE8-瀏覽器不支持

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
console.log(rules[0].parentRule);//null
</script>

【5】parentStyleSheet

　　parentStyleSheet屬性表示當前規則所屬的樣式表

　　[注意]IE8-瀏覽器不支持

<style>
.box{width: 100px;height: 100px;background-color:pink;}
</style>
<script>
var rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(rules[0].parentStyleSheet);
</script>

【6】type

　　type屬性返回有一個整數值，表示當前規則的類型

　　[注意]IE8-瀏覽器不支持

　　最常見的類型有以下幾種

1：樣式規則，部署了CSSStyleRule接口
3：輸入規則，部署了CSSImportRule接口
4：Media規則，部署了CSSMediaRule接口
5：字體規則，部署了CSSFontFaceRule接口

<style>
.box{width: 100px;height: 100px;background-color:pink;}
</style>

<script>
var rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;
console.log(rules[0].type);//1
</script>

方法

　　CSSStyleRule對象本身并沒有方法，操作CSSStyleRule對象的方法位于CSSStyleSheet對象中

【1】添加規則

insertRule()

　　insertRule(rule,index)方法表示向cssRules集合中指定的位置插入rule字符串，并返回當前樣式表的索引值

　　[注意]IE8-瀏覽器不支持

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<div class="box">測試文字</div>
<button id="btn">文字變紅</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { width: 100px; height: 100px; background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].insertRule('div{color:red;}',0));//0
    console.log(rules[0].cssText);//'div { color: red; }'
}
</script>

　　雖然，IE8-瀏覽器不支持insertRule()方法，但支持類似的addRule()方法

　　addRule(ruleKey,ruleValue,index)方法表示向cssRules集合中指定的位置插入rule字符串，并返回-1

　　[注意]firefox不支持

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<div class="box">測試文字</div>
<button id="btn">文字變紅</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { width: 100px; height: 100px; background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].addRule('div','color:red',0));//-1    
    console.log(rules[0].cssText);//'div { color: red; }'
}
</script>

兼容

function insertRule(sheet,ruleKey,ruleValue,index){
    return sheet.insertRule ? sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
}

【2】刪除規則

deleteRule()

　　deleteRule(index)方法刪除cssRules集合中指定位置的規則，無返回值　

　　[注意]IE8-瀏覽器不支持

<style>
.box{background-color:pink;}
.box{width: 100px;height: 100px;}
</style>

<div class="box">測試文字</div>
<button id="btn">刪除顏色</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].deleteRule(0));//undefined
    //.box { width: 100px; height: 100px; }
    console.log(rules[0].cssText);
}
</script>

　　雖然，IE8-瀏覽器不支持deleteRule()方法，但支持類似的removeRule()方法

　　removeRule(index)方法刪除cssRules集合中指定位置的規則，無返回值

　　[注意]firefox不支持

<style>
.box{background-color:pink;}
.box{width: 100px;height: 100px;}
</style>

<div class="box">測試文字</div>
<button id="btn">刪除顏色</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].removeRule(0));//undefined
    //.box { width: 100px; height: 100px; }
    console.log(rules[0].cssText);
}
</script>

兼容

function deleteRule(sheet,index){
    (typeof sheet.deleteRule == "function")? sheet.deleteRule(index) : sheet.removeRule(index);
}

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds