## 回顧什么是外聯樣式
所謂外聯樣式,就是在 HTML 頁面中內嵌樣式表或者引入外部樣式文件,再通過 CSS 選擇器定位 HTML 頁面元素,為其定義樣式。
以下示例代碼,就是定義外聯樣式表:
```html
<link rel="stylesheet" href="css/style.css">
```
上述示例代碼,通過 `<link>` 元素引入外部的樣式表。
```html
<style>
.button {
background-color: orange;
}
</style>
```
上述示例代碼,通過 `<style>` 元素定義內嵌樣式表。
## Document 對象的 styleSheets 屬性
Document 對象提供了 styleSheets 屬性,該屬性返回包含所有外聯樣式表(內嵌樣式表和外聯樣式表)的集合對象。
```javascript
var styleSheetList = document.styleSheets;
```
上述語法結構中,作為返回值的 styleSheetList 是一個由 styleSheet 對象組成的列表,每個 styleSheet 對象表示 HTML 頁面中內嵌樣式表或外聯樣式表。
我們可以通過打印該屬性值進行測試:
```javascript
console.log(document.styleSheets);
```
上述示例代碼輸出的結果如下:

## StyleSheetList 對象
Document 對象的 styleSheets 屬性返回的是一個 StyleSheetList 對象。該對象是一個類數組對象,可以通過 for 循環語句進行遍歷,或者將其轉換為數組。
> **值得注意的是:** StyleSheetList 對象本身不能使用數組方法進行操作。
我們可以通過以下示例代碼,測試研究 StyleSheetList 對象:
```javascript
var styleSheetList = document.styleSheets;
for (var i=0; i<styleSheetList.length; i++){
console.log(styleSheetList[i]);
}
```
上述示例代碼中,每次循環得到的是 StyleSheet 對象。
## CSSStyleSheet 對象
CSSStyleSheet 對象表示一個 CSS 樣式表(內嵌樣式表或外聯樣式表)。CSSStyleSheet 實現了更為通用的 StyleSheet,也從其父級 StyleSheet 繼承了屬性和方法。
我們可以通過打印該對象進行測試:
```javascript
console.log(document.styleSheets[0]);
```
上述示例代碼輸出的結果如下:

## CSSRuleList 對象
CSSStyleSheet 對象的 cssRules 屬性返回的是一個 CSSRuleList 對象。該對象是一個類數組對象,可以通過 for 循環語句進行遍歷,或者將其轉換為數組。
我們可以通過以下示例代碼,測試研究 CSSRuleList 對象:
```javascript
var styleSheet = document.styleSheets[0];
var cssRuleList = styleSheet.cssRules;
for(var i=0; i<cssRuleList.length; i++){
var cssRule = cssRuleList[i];
console.log(cssRule);
}
```
上述示例代碼中,每次循環得到是 CSSRule 對象。
## CSSRule 對象
CSSRule 對象表示一個 CSS 規則。一個 CSS 樣式表包含了一組 CSS 規則。
CSSRule 對象的常見屬性:
- style:返回 CSSStyleDeclaration 對象
- cssText:CSS 規則
- selectorText:選擇器
我們可以通過以下示例代碼,測試研究 CSSRule 對象:
```javascript
console.log(document.styleSheets[1].cssRules[0]);
```
上述示例代碼輸出的結果如下:

- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器