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