各種位置和長度

window.screen.width ,window.screen.height

螢幕寬/高度

window.screen.availWidth, window.screen.availHeight

螢幕寬/高度(空白空間)，拖拽工作列可以看到各個值的變化

window.screen.availTop, window.screen.availLeft

傳回視窗相對于螢幕的X/Y坐标,拖拽工作列可以看到各個值的變化

window.screenTop, window.screenLeft

同上

window.pageXOffset，window.pageYOffset

擷取頁面文檔滾動過的像素數。

但是ie6-8不支援此屬性，ie9已經支援是以在ie6-8下需要用 window.document.documentElement.scrollLeft,window.document.documentElement.scrollTop或者window.document.body.scrollLeft,window.document.body.scrollTop來代替。

其中window.document.documentElement和window.document.body之間的差别表現在window.document.documentElement以Html的根節點html為基點，window.document.body則以body為基點，主要是為了相容ie的各個版本。

window.innerWidth，window.innerHeight

設定或擷取浏覽器視窗文檔顯示區域的寬/高度，包括滾動條。

window.outerWidth，window.outerHeight

設定或擷取浏覽器視窗的外部寬度/高度，

F12 後，打開的内嵌的調試視窗也是計算在内的。

window.screenX，window.screenY

擷取浏覽器視窗左上角相對于螢幕左上角的x/y坐标。

clientWidth, clientHeight

clientWidth/Height = width/height + padding

offsetWidth，offsetHeight

offsetWidth/Height = width/height + border + padding

scrollWidth, scrollHeight

scrollWidth = padding + 内容高度

無滾動時，等于 clientWith/Height

offsetLeft, offsetTop

此屬性可以擷取元素的上外緣距離最近采用定位父元素内壁的距離，如果父元素中沒有采用定位的，則是擷取上外邊緣距離文檔内壁的距離。所謂的定位就是position屬性值為relative、absolute或者fixed。

clientLeft和, clientTop

元素的内邊距的外邊緣和他的邊框外邊緣之間的水準距離和垂直距離，通常這些值就等于左邊和上面的邊框寬度

scrollLeft ,scrollTop

滾動的距離

left , top

絕對定位元素 (position: absolute 或者 position: fixed 的元素)，left/top屬性指的是此元素的外邊距頂邊與此元素包含塊的頂邊之間的距離。

對于相對定位元素 (position: relative 的元素)，left/top屬性指的是元素相對正常位置往下移動的距離。

最後上幾張網絡圖：

引用：

令人頭疼的clientTop、scrollTop、offsetTop scrollTop、offsetHeight和offsetTop等屬性用法詳解 CSSOM視圖模式(CSSOM View Module)相關整理