js中有涉及各種各樣的寬和高，如window下、document下、event下的，在使用過程中容易混淆，做一下總結。

1.和window相關的寬高

window.innerWidth 內部寬

window.innerHeight 內部高

window.outWidth 外部寬

window.outHeight 外部高

window.innerWidth和window.innerHeight是瀏覽器可視區域的寬高

window.outWidth 和window.outHeight 是瀏覽器的總寬高，寬高包括滾動條

window.screen.height 螢幕高

window.screen.width 螢幕寬

2.和document相關的寬高

2.1 與client相關的寬高

獲得可視區域的寬高：document.body.clientHeight || document.documentElement.clientHeight || window.innerHeight

2.1.1 clientWidth和clientHeight

document.body.clientWidth和document.body.clientHeight指的是可見區域的寬高，及content+padding。

如果無padding無滾動，即為元素設定的寬度和高度 clientWidth =  style.width；

如果有padding無滾動clientWidth =  style.width + style.padding*2;

如果有padding有滾動條，因為滾動條會遮蓋元素的寬高 ，那麼該屬性就是其本身寬高減去滾動條的寬高 clientWidth = style.width +  style.padding*2 - 滾動軸寬度。

2.1.2 clientLeft和clientWidth

document.body.clientLeft document.body.clientTop 這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，值為0；clientLeft和 clientTop 是用來讀取元素的border的寬高 clientTop = border-top的border-width。

2.2 與offset相關的寬高

2.2.1 offsetWidth和offsetHeight

document.body.offsetWidth document.body.offsetHeight
 這一屬性指的是元素的border + padding + content的寬度和高度；該屬性和其內部的顯示內容是否超出元素大小無關，只和本身設定的border以及width和height有 關。

假如無padding無滾動無border offsetWidth = clientWidth = style.width;

假如有滾動條，有padding，有border offsetWidth = style.width +   style.padding*2 + (border-width)*2 = clientWidth + 滾動軸寬度 +
 (border-width)*2

假如有padding無滾動有border offsetWidth = style.width  +  style.padding*2 + (border-width)*2 = clientWidth + (border-width)*2

2.2.2 offsetLeft和offsetTop

document.body.offsetLeft document.body.offsetTop

如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative），  offsetParent為body

如果當前元素的父級元素中有CSS定位（position為absolute或relative），  offsetParent取最近的那個父元素

在IE6/7中：offsetLeft = (offsetParent的padding-left) + (當前元素的margin-left)

在IE8/9/10中及Chrome中：offsetLeft = (offsetParent的margin-left) +

（offsetParent的border的寬度）+ （offsetParent的padding-left） + (當前元素  的margin-left)

在FireFox中：offsetLeft = (offsetParent的margin-left)  + (offsetParent的padding-left) + (當前元素的margin-left)

2.3 與scroll相關的寬高

2.3.1 scrollHeight和scrollWidth

body中：document.body.scrollWidth document.body.scrollHeight
 document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有點區別的。

當給定的寬高小於瀏覽器的視窗時，scrollWidth通常是瀏覽器的寬高，   scrollHeight通常是瀏覽器的高度。

當給定高大於瀏覽器的視窗時，且內容小於給定寬高時，scrollWidth給定的寬  + 其所有的padding、margin、和border，scrollHeight給定的高 + 其所有 的   padding、margin、和border

當給定寬高大於瀏覽器視窗，且內容大於給定寬高scrollWidth內容寬高時，其  scrollWidth = scrollWidth內容的寬 + 其所有的padding、margin、和border
 scrollHeight = scrollHeight內容的高 + 其所有 的  padding、margin、和border

div中：

在無滾動軸情況下 ：scrollWidth = clientWidth + style.padding*2

在有滾動軸情況下：scrollWidth = 是實際內容的寬度 + padding*2

2.3.2 scrollLeft和scrollTop

document.body.scrollLeft document.body.scrollTop
 這對屬性是可讀寫的，指的是當元素其中的內容超出寬高的時候，元素被捲起的寬度 和高度。

3.和event相關的寬高

clientX和clientY 相對於瀏覽器(可視區域左上角0,0)的座標

screenX和screenY 相對於裝置螢幕左上角(0,0)的座標

offsetX和offsetY 相對於事件源左上角(0,0)的座標

pageX和pageY 相對於網頁(0,0)左上角

X和Y 本是IE屬性，相對於CSS動態定位的最內層包容元素