windows對象屬性總結

clientwidth和clientheight

這組屬性可以擷取元素可視區的大小，可以得到元素内容及内邊距所占據的空間大小。傳回了元素大小，但沒有機關，預設機關是px，如果你強行設定了機關，比如100em之類，它還是會傳回px的大小。(css擷取的話，是照着你設定的樣式擷取)。對于元素的實際大小，clientwidth和clientheight了解方式如下：

增加邊框，無變化；

增加外邊距，無變化；

增加滾動條，最終值等于原本大小減去滾動條的大小；

增加内邊距，最終值等于原本大小加上内邊距的大小；

scrollwidth和scrollheight

這組屬性可以擷取滾動内容(可見内容)的元素大小。傳回了元素大小，預設機關是px。如果沒有設定任何css的寬和高度，它會得到計算後的寬度和高度。對于元素的實際大小，scrollwidth和scrollheight了解如下:

(1) 增加邊框，不同浏覽器不同解釋（下面在ie8中運作正常，ie6運作不正常）：

a) firefox和opera浏覽器會增加邊框的大小，220x220

b) ie、chrome和safari浏覽器會忽略邊框大小，200x200

c) ie浏覽器隻顯示它本來内容的高度，200x18（ie8已經修改該問題）

(2) 增加内邊距，最終值會等于原本大小加上内邊距大小，220x220，ie為220x38

(3) 增加滾動條，最終值會等于原本大小減去滾動條大小，184x184，ie為184x18

(4) 增加外邊據，無變化。

(5) 增加内容溢出，firefox、chrome和ie擷取實際内容高度，opera比前三個浏覽器擷取的高度偏小，safari比前三個浏覽器擷取的高度偏大

offsetwidth和offsetheight

這組屬性可以傳回元素實際大小，包含邊框、内邊距和滾動條。傳回了元素大小，預設機關是px。如果沒有設定任何css的寬和高度，他會得到計算後的寬度和高度。對于元素的實際大小，offsetwidth和offsetheight了解如下：

(1)增加邊框，最終值會等于原本大小加上邊框大小，為220；

(2)增加内邊距，最終值會等于原本大小加上内邊距大小，為220；

(3) 增加外邊據，無變化；

(4)增加滾動條，無變化，不會減小；

對于元素大小的擷取，一般是塊級(block)元素并且以設定了css大小的元素較為友善。如果是内聯元素(inline)或者沒有設定大小的元素就尤為麻煩，是以，建議使用的時候注意

clientleft和clienttop擷取邊框大小

這組屬性可以擷取元素設定了左邊框和上邊框的大小。目前隻提供了left和top這組，并沒有提供right和bottom。如果四條邊寬度不同的話，可以直接通過計算後的樣式擷取，或者采用以上三組擷取元素大小的減法求得

右邊框的寬度：obj.offsetwidth-obj.clientwidth-obj.clientleft

底邊框的寬度：obj.offsetheight-obj.clientheight-obj.clienttop

offsetleft和offsettop

這組屬性可以擷取目前元素相對于父元素的位置。擷取元素目前相對于父元素的位置，最好将它設定為定位position:absolute；否則不同的浏覽器會有不同的解釋。

a、将position設定為absolute，則所有浏覽器傳回一樣的值

b、加上邊框和内邊距不會影響它的位置，但加上外邊據會累加

3、box.offsetparent得到父元素

offsetparent中，如果本身父元素是

，非ie傳回body對象，ie（ie6）傳回html對象。如果兩個元素嵌套，如果父元素沒有使用定位position:absolute，那麼offsetparent将傳回body對象或html對象。是以，在擷取offsetleft和offsettop時候，css定位很重要

如果說，在很多層次裡，外層已經定位，我們怎麼擷取裡層的元素距離body或html元素之間的距離呢？也就是擷取任意一個元素距離頁面上的位置。那麼我們可以編寫函數，通過不停的向上回溯擷取累加來實作

4.scrolltop和scrollleft

這組屬性可以擷取滾動條被隐藏(滾動條上方區域)的區域大小，也可設定定位到該區域

5、getboundingclientrect()

這個方法傳回一個矩形對象，包含四個屬性：left、top、right和bottom。分别表示元素各邊與頁面上邊和左邊的距離

注意：ie、firefox3+、opera9.5、chrome、safari支援，在ie中，預設坐标從(2,2)開始計算，導緻最終距離比其他浏覽器多出兩個像素，我們需要做個相容

分别加上外邊據、内邊距、邊框和滾動條，用于測試所有浏覽器是否一緻