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

2024-05-06 14:20:10

字體：大中小

供稿：網(wǎng)友

網(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
代碼如下:
<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 + " (包括邊線和滾動條的寬)";
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對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在FireFox中：
document.body.clientWidth ==> BODY對象寬度