javascript獲取網(wǎng)頁(yè)寬高方法匯總

更新時(shí)間：2015年07月19日 10:28:50 投稿：hebedich

本文給大家匯總介紹了下javascript獲取網(wǎng)頁(yè)寬高的方法，以及各個(gè)瀏覽器下不同方法獲取到的值的對(duì)比，有需要的小伙伴可以參考下。

document.body.clientWidth - 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?br /> document.body.clientHeight - 網(wǎng)頁(yè)可見(jiàn)區(qū)域高

document.body.offsetWidth - 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?，包括邊線和滾動(dòng)條的寬
document.body.offsetHeight - 網(wǎng)頁(yè)可見(jiàn)區(qū)域高，包括邊線和滾動(dòng)條的高[FF,chrom下是整個(gè)頁(yè)面高，IE opera 下正常]

document.body.scrollWidth - 網(wǎng)頁(yè)總寬
document.body.scrollHeight - 網(wǎng)頁(yè)總高

document.body.scrollTop - 有滾動(dòng)條的時(shí)候，向下拖動(dòng)滾動(dòng)條，上方不顯示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 瀏覽器窗口的內(nèi)部高度

window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

window.screenTop - 網(wǎng)頁(yè)正文部分上[網(wǎng)頁(yè)文檔的最上方距離屏幕最上方的距離，但FF不支持，Chrom,IE,Opera表現(xiàn)都不同，慎用]
window.screenLeft - 網(wǎng)頁(yè)正文部分左[網(wǎng)頁(yè)文檔的最左方距離屏幕最左方的距離，但FF不支持，Chrom,IE,Opera表現(xiàn)都不同，慎用]

window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的寬度

window.screen.availHeight - 可用工作區(qū)高度[整個(gè)屏幕但不包括下方任務(wù)欄]
window.screen.availWidth - 可用工作區(qū)寬度[整個(gè)屏幕的寬度]

window.screen.clorDepth - 屏幕色彩，常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持，其它不支持】

JavaScript 獲取頁(yè)面寬高的方法

<script>
function getInfo()
{
  var s = "";
  s += " 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?+ document.body.clientWidth;
  s += " 網(wǎng)頁(yè)可見(jiàn)區(qū)域高："+ document.body.clientHeight;
  s += " 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動(dòng)條的寬)";
  s += " 網(wǎng)頁(yè)可見(jiàn)區(qū)域高："+ document.body.offsetHeight + " (包括邊線的寬)";
  s += " 網(wǎng)頁(yè)正文全文寬："+ document.body.scrollWidth;
  s += " 網(wǎng)頁(yè)正文全文高："+ document.body.scrollHeight;
  s += " 網(wǎng)頁(yè)被卷去的高(ff)："+ document.body.scrollTop;
  s += " 網(wǎng)頁(yè)被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 網(wǎng)頁(yè)被卷去的左："+ document.body.scrollLeft;
  s += " 網(wǎng)頁(yè)正文部分上："+ window.screenTop;
  s += " 網(wǎng)頁(yè)正文部分左："+ 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>

在我本地測(cè)試當(dāng)中：
在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight

即可獲得，很簡(jiǎn)單，很方便。
而在公司項(xiàng)目當(dāng)中：
Opera仍然使用

document.body.clientWidth
document.body.clientHeight

可是IE和FireFox則使用

document.documentElement.clientWidth
document.documentElement.clientHeight

原來(lái)是W3C的標(biāo)準(zhǔn)在作怪啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 如果在頁(yè)面中添加這行標(biāo)記的話

在IE中：

document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度

在FireFox中：

document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度

在Opera中：

document.body.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?
document.body.clientHeight ==> 可見(jiàn)區(qū)域高度
document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

而如果沒(méi)有定義W3C的標(biāo)準(zhǔn)，則

IE為：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox為：

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

document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）

document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

Opera為：

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

document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）

document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: