## 回顧什么是內聯樣式
所謂內聯樣式,就是通過 HTML 頁面元素的 style 屬性為當前元素定義 CSS 樣式。
以下代碼示例,就是通過 style 屬性定義 CSS 內聯樣式:
```html
<p style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
```
> **值得注意的是:**
>
> - HTML 頁面的結構與樣式并沒有有效分離
> - 定義的 CSS 樣式只針對當前元素有效
## 獲取內聯樣式
由于設置內聯樣式的方式是利用 HTML 頁面元素的 style 屬性實現的,所以獲取內聯樣式主要是依靠 DOM 中獲取屬性方式實現。
- Element 對象的 getAttribute() 方法獲取 style 屬性的值。
- 通過 DOM 對象 HTMLElement 的 style 屬性獲取。
### Element 對象的 getAttribute() 方法
Element 對象的 getAttribute() 方法的語法結構如下:
```javascript
var value = element.getAttribute('style');
```
以上語法結構中調用 getAttribute() 方法的 element 表示 HTML 頁面元素,傳遞的參數 style 表示屬性名稱,而返回值則是指定屬性名對應的值(內聯樣式的聲明內容)。
我們可以通過以下示例代碼,學習如何通過 getAttribute() 方法獲取內聯樣式:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var style = pElem.getAttribute('style');
console.log(style);
</script>
```
上述示例代碼的輸出結果如下:

### DOM 對象的 style 屬性
由于 DOM 規范標準中將 Document 對象定位的 HTML 頁面元素解析為相應的對象,而這些對象都繼承于 HTMLElement 對象。該對象提供了 style 屬性,返回 CSSStyleDeclaration 對象。
我們可以通過以下示例代碼,學習如何通過 HTMLElement 對象的 style 屬性獲取內聯樣式:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var style = pElem.style;
console.log(style);
</script>
```
上述示例代碼,通過 style 屬性會得到 CSSStyleDeclaration 對象,該對象表示一個 CSS 屬性鍵值對的集合。
## CSSStyleDeclaration 對象
通過 element.style 返回的是 CSSStyleDeclaration 對象。CSSStyleDeclaration 對象表示一個CSS屬性鍵值對的集合。
CSSStyleDeclaration 對象提供的屬性和方法可以幫助我們獲取 CSS 樣式的具體內容。
| 屬性或方法 | 描述 |
| --- | --- |
| cssText | 聲明塊的文本內容。|
| length | 屬性的數量。|
| item() | 返回屬性名。 例如: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]|
| getPropertyValue() | 返回屬性值。例如:?valString=?styleObj.getPropertyValue('color')|
### cssText 屬性
通過 element.style.cssText 屬性獲取 CSS 聲明塊的文本內容。
我們可以通過以下示例代碼,學習如何通過 cssText 屬性獲取 CSS 聲明塊的文本內容:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
var cssText = styleDeclar.cssText;
console.log(cssText);
</script>
```
上述示例代碼的輸出結果如下:

> **值得注意的是:** cssText 屬性返回的是 CSS 聲明塊的文本內容,解析操作時會比較麻煩。
### 遍歷 CSSStyleDeclaration 對象
由于 CSSStyleDeclaration 對象具有 length 屬性,返回該對象的屬性的數量。我們可以通過這一特性實現遍歷 CSSStyleDeclaration 對象,從而得到所有屬性名和相應的值。
我們可以通過以下示例代碼,學習如何遍歷 CSSStyleDeclaration 對象:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var styleDeclar = pElem.style;
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var propertyValue = styleDeclar.getPropertyValue(propertyName);
console.log(propertyName + ' : ' + propertyValue);
}
</script>
```
上述示例代碼的輸出結果如下:

在上述示例代碼中,我們利用 CSSStyleDeclaration 對象的 length 屬性控制遍歷過程。
在遍歷過程中,我們先利用 CSSStyleDeclaration 對象的 item() 方法得到每一個 CSSStyleDeclaration 對象的屬性名,再利用 CSSStyleDeclaration 對象的 getPropertyValue() 方法根據屬性名得到相應的值。
### item() 方法
通過 element.style.item(index) 獲取 CSS 的樣式屬性名,這種方式也可以通過 element.style[index] 方式進行替換。換句話講,這兩種方式是等價的。
我們可以通過以下示例代碼,學習對比這兩種方式:
```javascript
for ( var i=0; i<styleDeclar.length; i++ ){
var itemName = styleDeclar.item(i);
var styleName = pElem.style[i];
console.log('item()方法: ' + itemName, 'style[index]: ' + styleName);
}
```
上述示例代碼的輸出結果如下:

### getPropertyValue() 方法
通過 element.style.item.getPropertyValue() 獲取 CSS 的樣式屬性值,這種方式也可以通過 element.style[propertyName] 方式進行替換。
我們可以通過以下示例代碼,學習對比這兩種方式:
```javascript
for ( var i=0; i<styleDeclar.length; i++ ){
var propertyName = styleDeclar.item(i);
var value1 = styleDeclar.getPropertyValue(propertyName);
var value2 = pElem.style[propertyName];
console.log('getPropertyValue()方法: ' + value1, 'style[attrName]: ' + value2);
}
```
上述示例代碼的輸出結果如下:

### 屬性鏈方式操作
由于通過 element.style 返回的是 CSSStyleDeclaration 對象,所以我們也可以通過 element.style.attrName 的方式獲取具體的樣式屬性的值。
我們可以通過以下示例代碼,學習這種獲取方式:
```html
<p id="p1" style="color: lightcoral;font-weight: bolder">這是一個段落內容.</p>
<script>
var pElem = document.getElementById('p1');
var style = pElem.style;
console.log(style.color);
</script>
```
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器