html 获取浏览器宽高,js获取浏览器高度与宽度的方法

今天在写一个js效果时，需要用到浏览器显示区域高度的值，所以就查了一下相关的js方法，发现里面的道道还真的不少。下面就来详细的说一下。

先上图，再看内容！

图片来自网络，侵删

js获取浏览器可视区域的高度和宽度的方法

1、获取没有声明 DOCTYPE IE浏览器显示窗口的大小document.body.offsetWidth

document.body.offsetHeight

2、获取声明 DOCTYPE 浏览器显示窗口的大小document.documentElement.clientWidth  //表示HTML文档所在窗口的当前宽度；

document.documentElement.clientHeight //表示HTML文档所在窗口的当前高度；

其它获取浏览器高度与宽度的方法

网页可见区域宽： document.body.clientWidth;  //表示HTML文档所在窗口的当前宽度；

网页可见区域高： document.body.clientHeight; //表示HTML文档所在窗口的当前高度；

网页可见区域高： document.body.offsetWidth;  //包括边线的宽

网页可见区域高： document.body.offsetHeight; //包括边线的宽

网页正文全文宽： document.body.scrollWidth;  //对象的滚动宽度

网页正文全文高： document.body.scrollHeight; //对象的滚动高度。

网页被卷去的高： document.body.scrollTop;  //对象最顶端和窗口中可见内容的最顶端之间的距离

网页被卷去的左： document.body.scrollLeft;  //对象左边界和窗口中目前可见内容的最左端之间的距离

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度： window.screen.availWidth;

浏览器的高(浏览器窗口内部)window.innerHeight;

浏览器的宽(浏览器窗口内部)window.innerWidth;

offsetWidth 与 offsetHeight 注释

offsetWidth = scrollWidth + 左右滚动条 +左右边框；

offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

常用的兼容代码

代码1：var w = document.documentElement.offsetWidth || document.body.offsetWidth ;

var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

代码2：var w = document.documentElement.clientWidth || document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;

各个浏览器js获取高度与宽度的方法

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高)