查詢計算樣式

一、概念

二、getcomputedstyle()

三、currentstyle

四、相容**

計算樣式是元素的最終渲染效果，是多種型別的css樣式互相博弈的結果。計算樣式通過getcomputedstyle方法獲取。

getcomputedstyle的返回結果是唯讀的。該方法需要兩個引數，其一當前元素節點，其二偽元素字串。如果不需要偽元素資訊，第二個引數設定為null或省略。ie8及以下版本的瀏覽器中不相容getcomputedstyle方法。getcomputedstyle方法有兩種寫法，**如下。

1、document.defaultview.getcomputedstyle(elem).width
2、window.getcomputedstyle(elem).width

getcomputedstyle方法的第二個引數設定為偽元素字串時（如:before、:after）表示獲取偽元素的css樣式表，設定為null或省略時表示返回元素自身的css樣式表。getcomputedstyle是唯一乙個獲取偽元素樣式表的方法。

修改偽元素樣式的最好方法是直接替換元素的class屬性。

注意事項

（1）各瀏覽器對font、background、border等復合樣式的處理結果不一樣，chrome會返回整個復合樣式，而ie、firefox和safari則輸出空串。

（2）不論以什麼格式設定顏色，瀏覽器都會以rgb()或rgba()的形式輸出。

（3）類似百分比等相對單位會轉換為絕對值

ie8及以下版本的瀏覽器不相容getcomputedstyle方法，但ie中有乙個唯讀的currentstyle屬性，該屬性包含當前元素全部的計算樣式。currentstyle屬性不支援復合樣式，對顏色、百分比不會進行轉換而是原樣輸出。

function getstyle(elem, prop)else
}

實現效果移動小方塊