📌  相关文章
📜  js 窗口尺寸 - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:32.829000             🧑  作者: Mango

JS 窗口尺寸

在Web开发中，获取浏览器窗口尺寸是一项常见的任务。在JavaScript中，可以通过访问window对象的属性和方法来获取当前浏览器窗口的尺寸。

window.innerHeight和window.innerWidth

通过访问window.innerHeight和window.innerWidth属性，可以获取当前浏览器窗口的高度和宽度，以像素为单位。这两个属性在大多数现代浏览器都被支持。

const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
window.outerHeight和window.outerWidth

window.outerHeight和window.outerWidth属性返回整个浏览器窗口的高度和宽度，包括边框和工具栏。与innerHeight和innerWidth属性不同的是，这两个属性在不同的浏览器中可能会有不同的行为。

const outerWindowHeight = window.outerHeight;
const outerWindowWidth = window.outerWidth;
document.documentElement.clientWidth和document.documentElement.clientHeight

除了访问window对象的属性之外，还可以通过访问document.documentElement对象的clientWidth和clientHeight属性来获取当前浏览器窗口的宽度和高度。这两个属性返回的是文档显示区域的宽度和高度，不包括滚动条和其他元素的边框。

const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
document.body.clientWidth和document.body.clientHeight

类似地，可以通过访问document.body对象的clientWidth和clientHeight属性来获取文档主体的宽度和高度。这两个属性返回的是文档主体的显示区域的宽度和高度，不包括滚动条和其他元素的边框。

const bodyClientWidth = document.body.clientWidth;
const bodyClientHeight = document.body.clientHeight;

以上这些属性在多数情况下足够了解客户端窗口的尺寸。在某些情况下，还可以使用window.getComputedStyle()方法来获取元素的计算样式，然后从中获取元素的尺寸和位置。

参考资料：