document.styleSheets與CSSStyleSheet

本章節介紹一下標題中兩個相關概念的用法，在一些動態載入css的程式碼中可能會有它們的應用。

document.styleSheets具體用法可以參閱document.styleSheets用法一章節。

一.CSSStyleSheet物件:

CSSStyleSheet型別物件表示頁面中的樣式表，可以是通過<style></style>定義，也可以是通過<link>標籤引入的樣式表。

通過document.styleSheets獲取的就是CSSStyleSheet型別物件。

CSSStyleSheet型別物件具有如下屬性:

1.type:返回一個表示樣式表型別的字串，對於css而言，返回值始終是"text/css"。

2.disabled:此屬性設定或者返回一個布林值，如果為true則樣式表不可用，如果為false則為可用。

3.href:返回一個標示樣式表的路徑，當然只對於<link>標籤有效，對於<style>返回值是null。

4.title:返回ownerNode的title屬性值。

5.media:返回一個當前樣式表支援的所有媒體型別的集合，通常情況下目標裝置型別是screen和print。

6.ownerRule:如果是通過@import匯入的，屬性就是指向表示匯入的規則的指標，否則值為null。IE不支援這個屬性。

7.cssRules:返回包含的樣式規則的集合。IE9以下瀏覽器不支援這個屬性，使用rules屬性替代。

CSSStyleSheet型別物件的方法:

1.insertRule(rule,index):此函式可以在cssRules規則集合中插入一個指定的規則，引數rule是標示規則的字串，引數index是值規則字串插入的位置。

2.deleteRule(index):此函式可以刪除指定索引的規規則，引數index規定規則的索引。

二.CSSStyleRule物件:

每一個樣式表CSSStyleSheet物件可以包含若干CSSStyleRule物件，也就是css樣式規則，如下:

[HTML] 純文字檢視 複製程式碼
<style type="text/css">
h1{color:red}
div{color:green}
</style>

在上面的程式碼中style標籤是一個CSSStyleSheet樣式表物件，這個樣式表物件包含兩個CSSStyleRule物件，也就是兩個css樣式規則。

CSSStyleRule物件具有下列屬性:

1.type:返回0-6的數字，表示規則的型別，型別列表如下:

    0: CSSRule.UNKNOWN_RULE。

    1:CSSRule.STYLE_RULE （定義一個CSSStyleRule物件）。

    2:CSSRule.CHARSET_RULE （定義一個CSSCharsetRule物件，用於設定當前樣式表的字符集，預設與當前網頁相同）。

    3:CSSRule.IMPORT_RULE （定義一個CSSImportRule物件，就是用@import引入其他的樣式表）

    4:CSSRule.MEDIA_RULE （定義一個CSSMediaRule物件，用於設定此樣式是用於顯示器，印表機還是投影機等等）。

    5:CSSRule.FONT_FACE_RULE （定義一個CSSFontFaceRule物件，CSS3的@font-face）。

    6:CSSRule.PAGE_RULE （定義一個CSSPageRule物件）。

2.cssText:返回一個字串，表示的是當前規則的內容，例如:    

[CSS] 純文字檢視 複製程式碼
div{color:green}

3.parentStyleSheet:返回所在的CSSStyleRule物件。

4.parentRule:如果規則位於另一規則中，該屬性引用另一個CSSRule物件。

5.selectorText:返回此規則的選擇器，如上面的div就是選擇器。

6.style:返回一個CSSStyleDeclaration物件。

三.CSSStyleDeclaration物件:

此物件含有表示所有樣式的屬性，如下截圖:

上面的截圖只有一部分，但是足以說明問題。此物件還具有下面的屬性:

1.cssText:此屬性返回當前規則的具體內容，如下:

[CSS] 純文字檢視 複製程式碼
color:green;

2.parentRule:返回一個CSSStyleRule物件。

物件的方法:

1.getPropertyValue(propertyName):獲取指定的名稱的css屬性值。

2.removeProperty(propertyName):刪除指定名稱的css屬性值值。

3.setProperty(propertyName,value,priority):設定指定名稱的css屬性值，第三個引數是指定優先順序。

四.獲取CSSStyleSheet物件:

通過document.styleSheets可以獲取此物件，文章開頭已經有推薦閱讀了這裡就不多介紹了，也可以使用<link>或者<style>元素直接獲取，DOM規定了一個叫做sheet的屬性可以獲取此物件，但是IE8和IE8以下瀏覽器不支援，不過可以使用styleSheet屬性替代。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function getStyleSheet(element) {
  return element.sheet || element.styleSheet;
}
var olink= document.getElementsByTagName("link")[0];
var sheet=getStyleSheet(olink);