浏览器页面区域大小的js获取方法

200 阅读 0 评论 132 点赞

我是靠谱客的博主威武月饼，最近开发中收集的这篇文章主要介绍浏览器页面区域大小的js获取方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

浏览器页面区域大小的获取:

复制代码代码如下:

 
//在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
//即可获得，很简单，很方便。 
//而在公司项目当中： 
//Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
//可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
//原来是W3C的标准在作怪啊 
//http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
//如果在页面中添加这行标记的话 

//在IE中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
//在FireFox中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
? 
//在Opera中： 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
//而如果没有定义W3C的标准，则 
//IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
//FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
//Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 