在前端开发中，有时需要获取浏览器窗口的高度。本文将介绍几种获取浏览器高度的方法，并提供代码示例。
1. 使用 window.innerHeight
window.innerHeight是一个只读属性，返回浏览器窗口的视口（viewport）高度，单位为像素。该属性包含整个窗口的高度，包括水平滚动条和下方可能存在的空白区域。
以下是使用window.innerHeight获取浏览器高度的示例代码：
const height = window.innerHeight; console.log(height); // 输出浏览器高度
2. 使用 document.documentElement.clientHeight
document.documentElement.clientHeight也是一个只读属性，返回文档根元素（HTML标签）的客户区高度，单位为像素。该属性不包括水平滚动条的高度，但包括下方可能存在的空白区域。
以下是使用document.documentElement.clientHeight获取浏览器高度的示例代码：
const height = document.documentElement.clientHeight; console.log(height); // 输出浏览器高度
3. 使用 document.body.clientHeight
在某些情况下，document.documentElement.clientHeight无法正确地返回浏览器高度。例如，当文档根元素的高度被设置为100%，并且body元素包含了一个绝对定位的元素时，document.documentElement.clientHeight将返回错误的值。此时可以使用document.body.clientHeight来获取浏览器高度。
以下是使用document.body.clientHeight获取浏览器高度的示例代码：
const height = document.body.clientHeight; console.log(height); // 输出浏览器高度
总结
本文介绍了三种常见的获取浏览器高度的方法。需要注意的是，不同的方法适用于不同的情况。在实际开发中，应该根据具体情况选择合适的方法来获取浏览器高度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15419