javascript獲取高度

元素邊框外側相對於父容器的邊框外側的高度

chrome firefox ie
原生

offsetTop 元素邊框外側相對於父容器的邊框內側的高度 元素邊框外側相對於父容器的邊框內側的高度 元素邊框外側相對於父容器的邊框內側的高度
offsetHeight 元素的高度（包括padding和border） 元素的高度（包括padding和border） 元素的高度（包括padding和border）
scrollHeight 元素內容實際高度 元素內容實際高度 元素內容實際高度
clientHeight 元素可見區域高度（包括padding） 元素可見區域高度（包括padding） 元素可見區域高度（包括padding）
clientTop 元素上邊框高度 元素上邊框高度 元素上邊框高度
scrollTop 元素滾動了的高度 元素滾動了的高度 元素滾動了的高度
jquery

offset().top 獲取元素距離文檔頂部高度 獲取元素距離文檔頂部高度 獲取元素距離文檔頂部高度
position().top 元素margin外側相對於父容器的邊框內側的高度 元素margin外側相對於父容器的邊框內側的高度 元素margin外側相對於父容器的邊框內側的高度
height() 元素實際高度 元素實際高度 元素實際高度
innerHeight() 元素高度（包括padding） 元素高度（包括padding） 元素高度（包括padding）
outerHeight() 元素高度（包括padding、border） 元素高度（包括padding、border） 元素高度（包括padding、border）
outerHeight(true) 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin）
scrollTop() 元素滾動了的高度 元素滾動了的高度 元素滾動了的高度
窗口、文檔高度

$(window).height() 窗口可見區域高度 窗口可見區域高度 窗口可見區域高度
document.documentElement.clientHeight 文檔可見區域高度 文檔可見區域高度 文檔可見區域高度
window.screen.height 屏幕分辨率高度 屏幕分辨率高度 屏幕分辨率高度
window.screen.availHeight 屏幕可用高度（屏幕高度除去底部任務欄） 屏幕可用高度（屏幕高度除去底部任務欄） 屏幕可用高度（屏幕高度除去底部任務欄）
window.screenY 窗口距離屏幕頂部高度 窗口距離屏幕頂部高度 窗口距離屏幕頂部高度
window.screenTop 窗口距離屏幕頂部高度 無此屬性 窗口距離屏幕頂部高度
$document.height() 文檔高度 文檔高度 文檔高度
document.documentElement.scrollHeight 文檔內容高度 文檔內容高度 文檔內容高度
document.body.scrollHeight body內容高度 body內容高度 body內容高度

注意：
offsetTop 父容器必須設置了relative或者是absolute，不然會一直往上找設置了二者的祖先元素，chrome和ie最終返回距離文檔頂部的高度，火狐返回的是距離body元素外邊框的高度。
position也是同樣，不過三個瀏覽器最後都返回的是距離文檔頂部的高度。

一般狀況下
$document.height()=document.documentElement.scrollHeight=document.body.scrollHeight=$body.outerHeight(true)

$(window).scrollTop()=$(document).scrollTop()=window.scrollY=document.body.scrollTop=
window.pageYOffset

$el.outerHeight()=$el[0].offsetHeight;

$(window).height()=document.documentElement.clientHeight;

$el.innerHeight()=$el[0].clientHeight;

$el.scrollTop()=$el[0].scrollTop;

在代碼中若是要用到高度的時候最好使用offsetHeight或者outerHeight()。

窗口滾動到底部：窗口高度+滾動了的高度=文檔高度。
元素滾動到底部：元素可見高度+滾動了的高度=元素內容高度。

瀏覽器差別
offsetHeight
IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認爲 offsetHeight 是網頁內容實際高度，能夠小於 clientHeight。

scrollHeight
IE、Opera 認爲 scrollHeight 是網頁內容實際高度，能夠小於 clientHeight。
NS、FF 認爲 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認爲 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 能夠小於 clientHeight。
IE、Opera 認爲 offsetHeight 是可視區域 clientHeight 滾動條加邊框，scrollHeight 則是網頁內容實際高度。

window 和 document使用height代替innerHeight和outerHeight

鼠標事件：
clientX 設置或獲取鼠標指針位置相對於當前窗口的 x 座標，其中客戶區域不包括窗口自身的控件和滾動條。 
clientY 設置或獲取鼠標指針位置相對於當前窗口的 y 座標，其中客戶區域不包括窗口自身的控件和滾動條。 
offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 座標。 
offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 座標。 
screenX 設置或獲取獲取鼠標指針位置相對於用戶屏幕的 x 座標。 
screenY 設置或獲取鼠標指針位置相對於用戶屏幕的 y 座標。 
x 設置或獲取鼠標指針位置相對於父文檔的 x 像素座標(亦即相對於當前窗口)。 
y 設置或獲取鼠標指針位置相對於父文檔的 y 像素座標(亦即相對於當前窗口)。

總結：
document.documentElement是html元素，document.body是body元素，document.body.scrollHeight就是文檔的總共高度，不是body的總共高度

原生js的 style屬性只能獲取到行內的樣式信息，定義在 css中的是沒法獲取到的，若是須要獲取的話用 document.defaultView.getComputedStyle(obj,null)[attr];