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

先上图,再看内容!

TIM截图20200622225041.png

图片来自网络,侵删

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