資訊專欄INFORMATION COLUMN
摘要：回顧什么是內聯(lián)樣式所謂內聯(lián)樣式，就是通過頁面元素的屬性為當前元素定義樣式。對象提供的屬性和方法可以幫助我們獲取樣式的具體內容。遍歷對象由于對象具有屬性，返回該對象的屬性的數(shù)量。方法通過獲取的樣式屬性名，這種方式也可以通過方式進行替換。
回顧什么是內聯(lián)樣式
所謂內聯(lián)樣式，就是通過 HTML 頁面元素的 style 屬性為當前元素定義 CSS 樣式。
以下代碼示例，就是通過 style 屬性定義 CSS 內聯(lián)樣式:
這是一個段落內容.
獲取內聯(lián)樣式值得注意的是:
HTML 頁面的結構與樣式并沒有有效分離
定義的 CSS 樣式只針對當前元素有效
由于設置內聯(lián)樣式的方式是利用 HTML 頁面元素的 style 屬性實現(xiàn)的，所以獲取內聯(lián)樣式主要是依靠 DOM 中獲取屬性方式實現(xiàn)。
Element 對象的 getAttribute() 方法獲取 style 屬性的值。
通過 DOM 對象 HTMLElement 的 style 屬性獲取。
Element 對象的 getAttribute() 方法Element 對象的 getAttribute() 方法的語法結構如下:
var value = element.getAttribute("style");
以上語法結構中調用 getAttribute() 方法的 element 表示 HTML 頁面元素，傳遞的參數(shù) style 表示屬性名稱，而返回值則是指定屬性名對應的值（內聯(lián)樣式的聲明內容）。
我們可以通過以下示例代碼，學習如何通過 getAttribute() 方法獲取內聯(lián)樣式:
這是一個段落內容.
上述示例代碼的輸出結果如下:
DOM 對象的 style 屬性由于 DOM 規(guī)范標準中將 Document 對象定位的 HTML 頁面元素解析為相應的對象，而這些對象都繼承于 HTMLElement 對象。該對象提供了 style 屬性，返回 CSSStyleDeclaration 對象。
我們可以通過以下示例代碼，學習如何通過 HTMLElement 對象的 style 屬性獲取內聯(lián)樣式:
這是一個段落內容.
上述示例代碼，通過 style 屬性會得到 CSSStyleDeclaration 對象，該對象表示一個 CSS 屬性鍵值對的集合。
CSSStyleDeclaration 對象通過 element.style 返回的是 CSSStyleDeclaration 對象。CSSStyleDeclaration 對象表示一個CSS屬性鍵值對的集合。
CSSStyleDeclaration 對象提供的屬性和方法可以幫助我們獲取 CSS 樣式的具體內容。
| 屬性或方法 | 描述 |
|---|---|
| cssText | 聲明塊的文本內容。 |
| length | 屬性的數(shù)量。 |
| item() | 返回屬性名。 例如: nameString= styleObj.item(0) Alternative: nameString= styleObj[0] |
| getPropertyValue() | 返回屬性值。例如:?valString=?styleObj.getPropertyValue("color") |
通過 element.style.cssText 屬性獲取 CSS 聲明塊的文本內容。
我們可以通過以下示例代碼，學習如何通過 cssText 屬性獲取 CSS 聲明塊的文本內容:
這是一個段落內容.
上述示例代碼的輸出結果如下:
遍歷 CSSStyleDeclaration 對象值得注意的是: cssText 屬性返回的是 CSS 聲明塊的文本內容，解析操作時會比較麻煩。
由于 CSSStyleDeclaration 對象具有 length 屬性，返回該對象的屬性的數(shù)量。我們可以通過這一特性實現(xiàn)遍歷 CSSStyleDeclaration 對象，從而得到所有屬性名和相應的值。
我們可以通過以下示例代碼，學習如何遍歷 CSSStyleDeclaration 對象:
這是一個段落內容.
上述示例代碼的輸出結果如下:
在上述示例代碼中，我們利用 CSSStyleDeclaration 對象的 length 屬性控制遍歷過程。
在遍歷過程中，我們先利用 CSSStyleDeclaration 對象的 item() 方法得到每一個 CSSStyleDeclaration 對象的屬性名，再利用 CSSStyleDeclaration 對象的 getPropertyValue() 方法根據(jù)屬性名得到相應的值。
item() 方法通過 element.style.item(index) 獲取 CSS 的樣式屬性名，這種方式也可以通過 element.style[index] 方式進行替換。換句話講，這兩種方式是等價的。
我們可以通過以下示例代碼，學習對比這兩種方式:
