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

发布时间：2023-01-01 18:43:16 来源：互联网

.

每个人都渴望内心深处的成功，但问题是大多数人认为他们无法成功。他们不相信自己可以通过斗争获得成功。

今天在写一个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;