## 回顧什么是內聯樣式 所謂內聯樣式，就是通過 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> ```