js取得網頁高度(詳細整理)_javascript技巧

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬網頁)
可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
螢幕解析度的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth

複製程式碼 程式碼如下:

<script> <BR>function getInfo(> <BR><script> <BR>function getInfo( <BR>var s = ""; <BR>s = " 網頁可見區域寬：" document.body.clientWidth; <BR>s = " 網頁可見區域高：" document.body.clientHeight; <BR>s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和捲軸的寬)"; <BR>s = " 網頁可見區域高：" document.body.offsetHeight " (包括邊線的寬)"; <BR>s = " 網頁正文全文寬：" document.body.scrollWidth; <BR>s = " 網頁正文全文高：" document.body.scrollHeight; <BR>s = " 網頁被捲去的高(ffff )：" document.body.scrollTop; <BR>s = " 網頁被捲去的高(ie)：" document.documentElement.scrollTop; <BR>s = " 網頁被捲去的左：" document.body. scrollLeft; <BR>s = " 網頁正文部分上：" window.screenTop; <BR>s = " 網頁正文部分左：" window.screenLeft; <BR>s = " 屏幕分辨率的高：" window.screen .height; <BR>s = " 螢幕解析度的寬度：" window.screen.width; <BR>s = " 螢幕可用工作區高度：" window.screen.availHeight; <BR>s = " 螢幕可用工作區寬度：" window.screen.availWidth; <BR>s = " 你的螢幕設定是" window.screen.colorDepth " 位元彩色"; <BR>s = " 你的螢幕設定" window.screen.deviceXDPI " 像素/英吋"; <BR>//alert (s); <BR>} <BR>getInfo(); <BR></script>

在我本地測試當中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可取得，很簡單，很方便。
而在公司專案當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
documentHeight
可是IE和FireFox則使用
document.documentm. >document.documentElement.clientHeight
原來是W3C的標準在作怪啊

如果在頁面中加入這行標記的話
在IE中
：


在IE中
：
在IE中
：


在IE中
： document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement. > 可見區域高度

在FireFox中
： document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度
document. documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
? 在Opera中
：
document.body.Widument.body. > 可見區域寬度document.body.clientHeight ==> 可見區域高度document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）
而如果沒有定義W3C的標準，則

IE為
：
document.documentElement.clientWidth == > 0
document.documentElement.clientHeight ==> 0 FireFox為
：
document.documentElement.clientWidth ==> 頁面物件寬度（即BODYDY>document.documentElement.clientWidth ==> 頁面物件寬度（即BODYDY物件寬度加上Margin寬度） document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）

Opera為
： document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高） 真是一件麻煩事情，其實就開發來看，寧可少一些物件和方法，不使用最新的標準要方便許多啊。
有時候需要取頁面的底部, 就會用到document.body.clientHeight , 在HTML 標準中(這一句就能取到整個頁面的高度, 不論body 的實際內容到底有多高, 例如, 1074* 768 的分辨率, 頁面最大化時, 這個高度約為720 , 即使頁面上只有一句”hello world” , 也仍然取到720.
可是在XHTML中, 如果body 體中只有一行, 則document. body.clientHeight 只能取到那一行的高度, 約20px, 這時如何還想取到整個頁面的高度, 就要用document.documentElement.clientHeight 來獲取了.

原因是: 在HTML 中, body 是整個DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的屬性時, 不能再取到整個頁的值. 區別新舊標準的行是: -//W3C//DTD HTML 4.0 Transitional//EN” > -//W3C//DTD XHTML 1.0 Transitional/ /EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

前者指明該頁使用舊標準, 後者指明該頁面使用新標準.

總結

: XHTML中用document.documentElement.clientHeight 取代複製程式碼複製程式碼 document.body.clientHeight