JavaScript获取当前窗口内的宽度和高度汇总

获取当前窗口的宽度和高度是Web前端开发中经常用到的操作，本文将介绍JavaScript获取当前窗口内宽度和高度的几种方法。

获取窗口大小

方法一：使用window对象的属性

可以使用window.innerWidth和window.innerHeight获取浏览器窗口的视口（viewport）大小，即网页可见区域的大小，包括水平滚动条和垂直滚动条。

示例代码：

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`窗口宽度为${windowWidth}px，窗口高度为${windowHeight}px。`);

方法二：使用document对象的属性

也可以使用document.documentElement.clientWidth和document.documentElement.clientHeight获取文档对象的客户端（client）区域大小，不包括水平滚动条和垂直滚动条。

示例代码：

const documentWidth = document.documentElement.clientWidth;
const documentHeight = document.documentElement.clientHeight;

console.log(`文档宽度为${documentWidth}px，文档高度为${documentHeight}px。`);

获取页面大小

如果要获取整个页面（包括被滚动条遮盖的部分）的大小，可以使用document.documentElement.offsetWidth和document.documentElement.offsetHeight。

示例代码：

const pageWidth = document.documentElement.offsetWidth;
const pageHeight = document.documentElement.offsetHeight;

console.log(`页面宽度为${pageWidth}px，页面高度为${pageHeight}px。`);

总结

以上就是获取窗口和页面大小的几种方法。需要注意的是，使用innerWidth和innerHeight只能获取窗口视口的尺寸，而且在IE8及以下版本不支持。如果需要兼容IE8及以下版本，可以使用如下代码替代：

let width = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
let height = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;

这段代码会先检查window.innerWidth和window.innerHeight是否可用，如果不可用，则返回document.documentElement.clientWidth和document.documentElement.clientHeight，如果还不可用，则返回document.body.clientWidth和document.body.clientHeight。