js獲取網(wǎng)頁(yè)高度(詳細(xì)整理)
更新時(shí)間：2012年12月28日 09:16:37 作者：
js獲取網(wǎng)頁(yè)高度包括(網(wǎng)頁(yè)可見(jiàn)區(qū)域高，屏幕分辨率的高，屏幕可用工作區(qū)高度,js 獲取瀏覽器高度 js 獲取屏幕高度)等等，各種高度,本文詳細(xì)整理了一些，需要了解的朋友可以參考下
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線(xiàn)的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線(xiàn)的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： 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)頁(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 + " (包括邊線(xiàn)和滾動(dòng)條的寬)";
s += " 網(wǎng)頁(yè)可見(jiàn)區(qū)域高："+ document.body.offsetHeight + " (包括邊線(xiàn)的寬)";
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁(yè)面中添加這行標(biāo)記的話(huà)
在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為：
document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
真是一件麻煩事情，其實(shí)就開(kāi)發(fā)來(lái)看，寧可少一些對(duì)象和方法，不使用最新的標(biāo)準(zhǔn)要方便許多啊。
有時(shí)候需要取頁(yè)面的底部, 就會(huì)用到document.body.clientHeight , 在HTML 標(biāo)準(zhǔn)中(這一句就能取到整個(gè)頁(yè)面的高度, 不論body 的實(shí)際內(nèi)容到底有多高, 例如, 1074*768 的分辨率, 頁(yè)面最大化時(shí), 這個(gè)高度約為720 , 即使頁(yè)面上只有一句”hello world” , 也仍然取到720.
可是在XHTML中, 如果body 體中只有一行, 則document.body.clientHeight 只能取到那一行的高度, 約20px, 這時(shí)如何還想取到整個(gè)頁(yè)面的高度, 就要用document.documentElement.clientHeight 來(lái)獲取了.
原因是: 在HTML 中, body 是整個(gè)DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的屬性時(shí), 不能再取到整個(gè)頁(yè)面的值.
區(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“>
前者指明該頁(yè)面使用舊標(biāo)準(zhǔn), 后者指明該頁(yè)面使用新標(biāo)準(zhǔn).
總結(jié):
XHTML中用 document.documentElement.clientHeight 代替
復(fù)制代碼 代碼如下:
document.body.clientHeight
相關(guān)文章
TypeScript中l(wèi)et和var的區(qū)別介紹
這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個(gè)方面做詳細(xì)介紹，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)側(cè)邊欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call
下面小編就為大家?guī)?lái)一篇全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
TypeScript接口和類(lèi)型的區(qū)別小結(jié)
在 TypeScript 中，有兩種主要的定義自定義類(lèi)型的方式，接口和類(lèi)型，盡管它們?cè)谕庥^上可能相似，但它們之間有一些關(guān)鍵的區(qū)別，本文就詳細(xì)的介紹一下，感興趣的可以了解下2023-05-05
BootStrap實(shí)現(xiàn)鼠標(biāo)懸停下拉列表功能
這篇文章主要介紹了BootStrap實(shí)現(xiàn)鼠標(biāo)懸停下拉列表功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
實(shí)現(xiàn)點(diǎn)擊列表彈出列表索引的兩種方式
使用利用事件冒泡委托給列表的父節(jié)點(diǎn)去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對(duì)你學(xué)習(xí)js有所幫助2013-03-03
JavaScript時(shí)間格式化函數(shù)功能及使用示例
這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
JavaScript進(jìn)階（四）原型與原型鏈用法實(shí)例分析
這篇文章主要介紹了JavaScript原型與原型鏈,結(jié)合實(shí)例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
Fetch API是一種用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求的現(xiàn)代JavaScript API，提供了更簡(jiǎn)潔、強(qiáng)大和靈活的方式來(lái)處理異步數(shù)據(jù)交互，本文主要為大家介紹了js中js中基本用法，感興趣的同學(xué)可以參考下2023-07-07
JAVASCRIPT下判斷IE與FF的比較簡(jiǎn)單的方式
在JAVASCRIPT當(dāng)中可以通過(guò)取當(dāng)前瀏覽器返回值來(lái)判斷當(dāng)前使用什么瀏覽器。2008-10-10