網(wǎng)上不是有這么個(gè)段子嘛：可怕的是，比你聰明的人比你更勤奮。那么，這里的“勤奮”的差異體現(xiàn)在什么地方呢？就拿這個(gè)getComputedStyle舉例：懶惰青年是看一下，立馬像看見鳳姐一樣視線離開；普通青年是看一下，發(fā)現(xiàn)自己不了解，百一下或谷一下，熟悉了解之；勤奮青年是不僅了解，還抽出時(shí)間實(shí)踐之（如做個(gè)簡(jiǎn)單demo測(cè)試），熟悉方法的特異性，驗(yàn)證一些觀點(diǎn)正確性。 ---來(lái)自張?chǎng)涡癫┛屠锩娴囊欢巍?/p>
逛著博客看到大神張?chǎng)涡竦牟┛屠锩嬗幸陨线@一段話，然后看看手中的JS高程這本書，發(fā)現(xiàn)我也得總結(jié)一些什么吧...雖然有的內(nèi)容在日常開發(fā)中用不到，但是一些框架的底層中卻有可能使用到了。
在HTML中定義樣式有三種方法：外部樣式表，嵌入樣式表，內(nèi)聯(lián)樣式。在DOM2級(jí)樣式中圍繞這三種方式提供了一套API。首先要知道新的東西在各種版本的瀏覽器上是會(huì)存在兼容性問題。所以提供一種檢測(cè)瀏覽器是否支持DOM2級(jí)別的CSS能力：
var support = document.implementation.hasFeature('CSS', '2.0') //返回true或者false
一、訪問元素的樣式
任何支持style特性的HTML元素都有對(duì)應(yīng)的一個(gè)style屬性，這個(gè)style屬性是一個(gè)CSSStyleDeclaration的實(shí)例。這個(gè)屬性只包含元素所有通過style特性設(shè)置的樣式信息。
注意：float屬性在JavaScript中是一個(gè)關(guān)鍵字，所以我們需要用另一種形式表現(xiàn)，在IE中是通過styleFloat表示，其他瀏覽器中是通過cssFloat表示。
通過style屬性設(shè)置樣式的同時(shí)也是動(dòng)態(tài)的改變?cè)氐耐庥^。在標(biāo)準(zhǔn)模式下度量值都是需要設(shè)置單位，在混雜模式下不一定需要，所以我們建議都指定度量單位。
-
DOM樣式屬性和方法
在DOM2規(guī)范中為style對(duì)象定義了一些屬性和方法。
1.cssText：可以通過這個(gè)屬性訪問style特性中的css代碼。也可以通過它進(jìn)行設(shè)置樣式代碼；
obj.style.cssText='width:100px;height:100px'
可以看到這個(gè)屬性可以一次設(shè)置多個(gè)樣式，這樣比一個(gè)個(gè)設(shè)置方便了很多
2.length：表示應(yīng)用給元素CSS屬性的數(shù)量（只計(jì)算style特性中的長(zhǎng)度）
3.parentRule：表示cssRule對(duì)象。
4.getPropertyCssValue(propertyName)：返回包含指定屬性值得cssValue對(duì)象。（在chrome下報(bào)錯(cuò)沒有這個(gè)方法）
5.getPropertyValue(propertyName)：返回給定屬性的字符串值。（只返回style特性中的樣式）
6.item(index)：返回指定位置的Css屬性名稱。
7.removeProperty(propertyName)：從樣式特性中刪除指定屬性。
8.setProperty(property, value, priority)：將給定屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)標(biāo)志。
注意：
1.cssText可以返回style特性中css代碼的內(nèi)部表示，可以設(shè)置style特性的值，不過這個(gè)設(shè)置會(huì)覆蓋它已有的style的值。
2.getPropertyCssValue會(huì)返回包含兩個(gè)cssValue對(duì)象，這兩個(gè)屬性分別是cssText和cssValueType，cssText返回的就是樣式的值，但是cssValueType返回的是一個(gè)數(shù)量值，0表示是繼承而來(lái)的，1表示是基本的值，2表示值列表，3表示自定義的值。
-
計(jì)算的樣式
這里要介紹兩個(gè)計(jì)算樣式的屬性方法：
- getComputedStyle()方法：
該方法接受兩個(gè)參數(shù)，第一，要取得樣式的元素，第二，設(shè)置為null就可以了。該方法返回的是一個(gè)CSSStyleDeclaration對(duì)象，和style屬性的類型相同。
格式:
document.defaultView.getComputedStyle(element, null)[cssAttr]
window.getComputedStyle(element, null)[cssAttr]
eg:
document.defaultView.getComputedStyle(div, null)['height']
window.getComputedStyle(div, null)['height']
實(shí)際上，使用defaultView
基本上是沒有必要的，getComputedStyle
本身就存在window
對(duì)象之中。根據(jù)DennisHall的說(shuō)法，使用defaultView
可能一是人們不太樂意在window上專門寫個(gè)東西，二是讓API在Java中也可用（這我不懂，忘指點(diǎn)~~）。---來(lái)自張?chǎng)涡?/p>
2.currentStyle屬性
在IE中不支持上面的方法，該屬性也是CSSStyleDeclaration的一個(gè)實(shí)例，包含當(dāng)前元素所有計(jì)算過的屬性。
使用方法
obj.currentStyle['height']
