JavaScript 指令碼化 CSS

元素節點的style屬性（Element.style）

style屬性的值是一個 CSSStyleDeclaration 例項。
這個物件所包含的屬性與 CSS 規則一一對應，但是名字需要改寫，比如background-color寫成backgroundColor。改寫的規則是將橫槓從 CSS 屬性名中去除，然後將橫槓後的第一個字母大寫。
如果 CSS 屬性名是 JavaScript 保留字，則規則名之前需要加上字串css，比如float寫成cssFloat。

注意，該物件的屬性值都是字串，設定時必須包括單位，但是不含規則結尾的分號。比如，divStyle.width不能寫為100，而要寫為100px。

var div = document.getElementsByClassName('myDiv')[0];
div.style.width = '200px';

另外，Element.style返回的只是行內樣式，並不是該元素的全部樣式。通過樣式表設定的樣式，或者從父元素繼承的樣式，無法通過這個屬性得到。元素的全部樣式要通過window.getComputedStyle()得到。

window.getComputedStyle方法

行內樣式（inline style）具有最高的優先順序，改變行內樣式，通常會立即反映出來。但是，網頁元素最終的樣式是綜合各種規則計算出來的。因此，如果想得到元素實際的樣式，只讀取行內樣式是不夠的，需要得到瀏覽器最終計算出來的樣式規則。

window.getComputedStyle方法，就用來返回瀏覽器計算後得到的最終規則（絕對值）。它接受一個節點物件作為引數，返回一個 CSSStyleDeclaration 例項，包含了指定節點的最終樣式資訊。所謂“最終樣式資訊”，指的是各種 CSS 規則疊加後的結果。

// <div id="myDiv" class="myDiv" style=" width: 10em;">mydiv</div>
var div = document.getElementsByClassName('myDiv')[0];
window.getComputedStyle(div).width   //160px
 

window.getComputedStyle方法返回的 CSSStyleDeclaration 例項是只讀的
（相容性：IE8及IE8以下不相容）

Element.currentStyle

IE獨有的屬性
只讀
返回的計算樣式的值不是經過轉換的絕對值，比如你寫em（畫素），它仍然會返回這個em值，寫%值，仍然返回%值。

封裝的相容性方法

function getStyle(ele,prop) {
    if(window.getComputedStyle){
     return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currenStyle[prop];
    }
}