如何获取浏览器窗口高度

在前端开发中，我们有时需要获取用户浏览器的窗口高度来做一些自适应布局或其他操作。本文将介绍几种获取窗口高度的方法。

1.使用 window.innerHeight 属性

window.innerHeight 是一个只读属性，返回浏览器窗口视口的高度，以像素为单位（包括水平滚动条）。该值不包括工具栏和底部内容区域的高度。

const windowHeight = window.innerHeight;
console.log(windowHeight);

2.使用 document.documentElement.clientHeight 属性

document.documentElement.clientHeight 返回当前文档的根元素（HTML 标签）的高度，以像素为单位。如果文档没有 CSS 样式表，则与 window.innerHeight 相同，但是可以修改该值。

const windowHeight = document.documentElement.clientHeight;
console.log(windowHeight);

3.使用 document.body.clientHeight 属性

document.body.clientHeight 返回文档 body 元素的高度，以像素为单位。如果文档没有 CSS 样式表，则与 window.innerHeight 相同，但是可以修改该值。

const windowHeight = document.body.clientHeight;
console.log(windowHeight);

4.使用 $(window).height() 方法（jQuery）

如果你在项目中使用了 jQuery 库，可以使用 $(window).height() 方法来获取窗口高度。这个方法与 window.innerHeight 类似，但是更加兼容各种浏览器。

const windowHeight = $(window).height();
console.log(windowHeight);

总之，在实际开发中，你可以根据自己的需求来选择使用哪种方法获取窗口高度。如果不清楚具体情况，建议使用 window.innerHeight 属性。

希望本文对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29906