快捷導(dǎo)航

js獲取網(wǎng)頁高度(詳細(xì)整理)

更新時(shí)間：2012年12月28日 09:16:37 作者：

js獲取網(wǎng)頁高度包括(網(wǎng)頁可見區(qū)域高，屏幕分辨率的高，屏幕可用工作區(qū)高度,js 獲取瀏覽器高度 js 獲取屏幕高度)等等，各種高度,本文詳細(xì)整理了一些，需要了解的朋友可以參考下

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

復(fù)制代碼代碼如下:

 
<script> 
function getInfo() 
{ 
var s = ""; 
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth; 
s += " 網(wǎng)頁可見區(qū)域高："+ document.body.clientHeight; 
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動(dòng)條的寬)"; 
s += " 網(wǎng)頁可見區(qū)域高："+ document.body.offsetHeight + " (包括邊線的寬)"; 
s += " 網(wǎng)頁正文全文寬："+ document.body.scrollWidth; 
s += " 網(wǎng)頁正文全文高："+ document.body.scrollHeight; 
s += " 網(wǎng)頁被卷去的高(ff)："+ document.body.scrollTop; 
s += " 網(wǎng)頁被卷去的高(ie)："+ document.documentElement.scrollTop; 
s += " 網(wǎng)頁被卷去的左："+ document.body.scrollLeft; 
s += " 網(wǎng)頁正文部分上："+ window.screenTop; 
s += " 網(wǎng)頁正文部分左："+ window.screenLeft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的寬："+ window.screen.width; 
s += " 屏幕可用工作區(qū)高度："+ window.screen.availHeight; 
s += " 屏幕可用工作區(qū)寬度："+ window.screen.availWidth; 
s += " 你的屏幕設(shè)置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕設(shè)置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
</script> 

在我本地測試當(dāng)中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單，很方便。
而在公司項(xiàng)目當(dāng)中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標(biāo)準(zhǔn)在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在頁面中添加這行標(biāo)記的話
在IE中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在FireFox中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
?
在Opera中：
document.body.clientWidth ==> 可見區(qū)域?qū)挾?
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
而如果沒有定義W3C的標(biāo)準(zhǔn)，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
真是一件麻煩事情，其實(shí)就開發(fā)來看，寧可少一些對(duì)象和方法，不使用最新的標(biāo)準(zhǔn)要方便許多啊。
有時(shí)候需要取頁面的底部, 就會(huì)用到document.body.clientHeight , 在HTML 標(biāo)準(zhǔn)中(這一句就能取到整個(gè)頁面的高度, 不論body 的實(shí)際內(nèi)容到底有多高, 例如, 1074*768 的分辨率, 頁面最大化時(shí), 這個(gè)高度約為720 , 即使頁面上只有一句”hello world” , 也仍然取到720.
可是在XHTML中, 如果body 體中只有一行, 則document.body.clientHeight 只能取到那一行的高度, 約20px, 這時(shí)如何還想取到整個(gè)頁面的高度, 就要用document.documentElement.clientHeight 來獲取了.
原因是: 在HTML 中, body 是整個(gè)DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的屬性時(shí), 不能再取到整個(gè)頁面的值.

區(qū)別新舊標(biāo)準(zhǔn)的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明該頁面使用舊標(biāo)準(zhǔn), 后者指明該頁面使用新標(biāo)準(zhǔn).

總結(jié):
XHTML中用 document.documentElement.clientHeight 代替

復(fù)制代碼代碼如下:

document.body.clientHeight

您可能感興趣的文章: