瀏覽器頁(yè)面區(qū)域大小的js獲取方法
更新時(shí)間：2013年09月21日 16:56:52 作者：
瀏覽器頁(yè)面的區(qū)域大小如何獲取，在本有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
瀏覽器頁(yè)面區(qū)域大小的獲取:
//在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)在作怪啊
//http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
//如果在頁(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為：
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高）
復(fù)制代碼 代碼如下:
//在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)在作怪啊
//http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
//如果在頁(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為：
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高）
您可能感興趣的文章:
- 兩個(gè)JSP頁(yè)面父頁(yè)面獲取子頁(yè)面內(nèi)容的兩種方法
- js通過(guò)location.search來(lái)獲取頁(yè)面?zhèn)鱽?lái)的參數(shù)
- js獲取頁(yè)面?zhèn)鱽?lái)參數(shù)的方法
- js獲取當(dāng)前頁(yè)面的url網(wǎng)址信息
- js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例
- js獲取當(dāng)前頁(yè)面路徑示例講解
- 通過(guò)JS來(lái)判斷頁(yè)面控件是否獲取焦點(diǎn)
- js獲取html頁(yè)面節(jié)點(diǎn)方法(遞歸方式)
- js獲取頁(yè)面description的方法
相關(guān)文章
php常見(jiàn)的頁(yè)面跳轉(zhuǎn)方法匯總
Web系統(tǒng)中，從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，是LAMP項(xiàng)目中最常用的技術(shù)之一。頁(yè)面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動(dòng)產(chǎn)生的。 此處介紹PHP中常用的實(shí)現(xiàn)頁(yè)面自動(dòng)跳轉(zhuǎn)的方法。2015-04-04
本篇文章主要介紹了RequireJS按需加載樣式文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號(hào)/姓名功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號(hào)/姓名功能,涉及三元運(yùn)算符的判定及字符串正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理及代碼
本文主要介紹DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理，感興趣的朋友可以了解下，或許對(duì)你的DWR學(xué)習(xí)有幫助，閑話就不多說(shuō)了，看代碼了2013-01-01
javascript 字符 Escape,encodeURI,encodeURIComponent
下面是對(duì)字符串編碼轉(zhuǎn)換功能函數(shù)大家，大家可以根據(jù)實(shí)際需要選擇使用。2009-07-07
firefox中JS讀取XML文件...2006-12-12
這篇文章主要介紹了微信小程序錄音與播放錄音功能,小程序中提供了兩種錄音的API，舊版本錄音功能和新版錄音功能，需要的朋友可以參考下2017-12-12
JS短路原理的應(yīng)用示例 精簡(jiǎn)代碼的途徑
正如標(biāo)題所言，js中||和&&的特性幫我們精簡(jiǎn)了代碼的同時(shí)，也帶來(lái)了代碼可讀性的降低。這就需要我們自己來(lái)權(quán)衡了，下面有個(gè)不錯(cuò)的示例2013-12-12
antd項(xiàng)目實(shí)現(xiàn)彩蛋效果的詳細(xì)代碼
這篇文章主要介紹了antd項(xiàng)目如何實(shí)現(xiàn)彩蛋效果,首先在components目錄下創(chuàng)建Transform目錄，包括index.css、index.js，index.js是主要的邏輯代碼，下面對(duì)代碼進(jìn)行分析，需要的朋友可以參考下2022-09-09
js,jQuery 排序的實(shí)現(xiàn)代碼,網(wǎng)頁(yè)標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序
js,jQuery 排序的實(shí)現(xiàn),網(wǎng)頁(yè)標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序，需要的朋友可以參考下。2011-04-04