頁面和塊高度在JavaScript中的屬性總結

經常看到有人百度為什麼cliengHeihgt擷取的值為0，clientHeight與offsetHeight到底哪裡不一樣，為什麼遇到這樣問題的時候你總是感到迷惘呢，究其原因是對他們的屬性不認識造成的，當我們建立HTML頁面時候對於一個元素的寬度通常我們會指定他多大（以百分比或以像素為單位），但高度往往可以有所不同，這取決於你的內容。與塊的高度相關聯的常見問題是：向下滾動到特定的地方高度是多少；元素的絕對位置，;一個塊相對於另一個塊的高度等。在這種情況下CSS並不總是有協助，特別是如果頁面是動態，這個時候使用javascript來擷取他們的值是非常有協助的

頁面高度

設定視窗對象的高度的方法：

屬性	描述
innerHeight（innerWidth）	設定視窗的內容地區的高度
outerHeight（outerWidth）	設定視窗高度
screen.availHeight（screen.availWidth）	高度，以像素為單位的工作區螢幕大小（不含工具列的高度）
screen.height（screen.width）	螢幕的高度（以像素為單位）
screenY（screenX）	從螢幕頂部到瀏覽器視窗的上邊界的距離
scrollY（scrollX）	文檔垂直滾動的距離
pageYOffset（pageXOffset）	頁面的當前垂直位置相對於視窗角最上方左側

請注意，第一併非所有的瀏覽器都支援，第二，並非所有的屬性值一致。另外，不要忘 記，這些都是針對視窗對象中的所有屬性，這意味著它們只適用於視窗對象，所以你不能這樣寫document.getElementById（ID）.innerHeight等  但是，在測試過程中（IE 6, FF 2.0, Opera 9.25)），結果發現，所有的瀏覽器只支援window.screen.availHeight和 window.screen.height（見下面匯總表）。但是，在大多數情況下，這是不夠的，它往往是要知道塊或容器的高度，所以你應該尋找其他方式

屬性	描述
clientHeight（clientWidth）	沒有捲軸的高度
scrollHeight（scrollWidth）	包括捲軸的高度
scrollTop（scrollLeft）	當前位置相對於該塊的上邊界的垂直位移
offsetHeight（offsetWidth）	對象的可見寬度，包捲軸等邊線，會隨視窗的顯示大小改變

重要注意事項：這些屬性需要在頁面完全載入後才能使用，否則可能會有所不同，為什麼呢？看下面的表...

匯總表

屬性	沒有定義DOCTYPE			定義了！!DOCTYPE XHTML 1.0 Transitional
	IE瀏覽器（6）	FF（2.0）	Opera（9.25）	IE瀏覽器（6）	FF（2.0）	Opera（9.25）
window.innerHeight	未定義	807	848	未定義	807	848
window.outerHeight	未定義	979	911	未定義	979	911
window.screen.availHeight	971	971	971	971	971	971
window.screen.height	1024	1024	1024	1024	1024	1024
window.screenY	未定義	-4	-23	未定義	-4	-23
window.scrollY	未定義	變化取決於從滾動	未定義	未定義	變化取決於從滾動	未定義
window.pageYOffset	未定義	變化取決於從滾動	變化取決於從滾動	未定義	變化取決於從滾動	變化取決於從滾動
document.body.clientHeight	846	807	848	3196	3124	3136
document.body.scrollHeight	3252	3202	3166	3196	3124	3136
document.body.scrollTop	變化取決於從滾動	變化取決於從滾動	變化取決於從滾動	0	0	0
document.documentElement.scrollTop	0	0	0	變化取決於從滾動	變化取決於從滾動	變化取決於從滾動
document.body.offsetHeight	850	3192	848	3196	3124	3136
的document.getElementById（this_tbl）.clientHeight	361	371	361	361	370	361
的document.getElementById（this_tbl）.scrollHeight	361	371	361	361	370	361
的document.getElementById（this_tbl）.offsetHeight	361	371	361	361	370	361

測試在您的瀏覽器（重新整理頁面點擊下面refresh按鈕就行測試）

window.innerHeight		700
window.outerHeight		878
window.screen.availHeight		870
window.screen.height		900
window.screenY		-4
window.scrollY		0
window.pageYOffset		0
document.body.clientHeight		145
document.body.scrollHeight		145
document.body.scrollTop		0
document.documentElement.scrollTop		0
document.body.offsetHeight		145
的document.getElementById（TBL）。clientHeight		347
的document.getElementById（TBL）。scrollHeight		347
的document.getElementById（TBL）。offsetHeight		347

註： 表中的值取決於個人設定（工具列，狀態列，字型大小等），所以他們可能會有所不同，即使你的瀏覽器版本是相同的。

結論

• DOCTYPE影響上述參數的值;
• 在螢幕上確定高度時，你總是可以根據window.screen.height來確定;
• 找到一個頁面或塊元素的可見部分的高度使用的document.getElementById.（id）.clientHeight，包括滾動部分的- 的document.getElementById（ID）.scrollHeight。

hide