js 获取窗口高度
在JavaScript中，获取窗口高度是一个常见的操作，尤其是在开发响应式网页或需要动态调整页面布局时。窗口高度通常指的是浏览器视口（viewport）的高度，即用户当前可见的页面区域的高度。JavaScript提供了多种方法来获取窗口高度，本文将详细介绍这些方法，并探讨它们的适用场景和注意事项。
1. window.innerHeight
window.innerHeight 是最常用的获取窗口高度的方法。它返回浏览器视口的高度，包括水平滚动条的高度（如果有的话）。这个属性是只读的，返回的值是一个整数，表示以像素为单位的高度。
let windowHeight = window.innerHeight;
console.log(windowHeight);适用场景
window.innerHeight 适用于大多数需要获取视口高度的场景，尤其是在响应式设计中，根据视口高度动态调整页面布局时非常有用。
注意事项
window.innerHeight的值会随着浏览器窗口大小的变化而变化。- 如果页面有水平滚动条，
window.innerHeight会包括滚动条的高度。
2. document.documentElement.clientHeight
document.documentElement.clientHeight 返回文档根元素（即 <html> 元素）的视口高度，不包括滚动条、边框和边距。与 window.innerHeight 类似，但它不包括滚动条的高度。
let clientHeight = document.documentElement.clientHeight;
console.log(clientHeight);适用场景
document.documentElement.clientHeight 适用于需要获取不包括滚动条的视口高度的场景，例如在计算页面内容的高度时。
注意事项
document.documentElement.clientHeight的值不包括滚动条的高度。- 如果页面没有滚动条，
document.documentElement.clientHeight和window.innerHeight的值通常是相同的。
3. document.body.clientHeight
document.body.clientHeight 返回 <body> 元素的视口高度，不包括滚动条、边框和边距。与 document.documentElement.clientHeight 类似，但它返回的是 <body> 元素的高度。
let bodyHeight = document.body.clientHeight;
console.log(bodyHeight);适用场景
document.body.clientHeight 适用于需要获取 <body> 元素高度的场景，例如在动态调整 <body> 元素的内容时。
注意事项
document.body.clientHeight的值不包括滚动条的高度。- 如果
<body>元素的内容高度小于视口高度，document.body.clientHeight的值可能小于window.innerHeight。
4. window.outerHeight
window.outerHeight 返回整个浏览器窗口的高度，包括工具栏、地址栏、状态栏等浏览器界面元素。这个属性是只读的，返回的值是一个整数，表示以像素为单位的高度。
let outerHeight = window.outerHeight;
console.log(outerHeight);适用场景
window.outerHeight 适用于需要获取整个浏览器窗口高度的场景，例如在开发浏览器扩展或需要与浏览器界面交互的应用时。
注意事项
window.outerHeight的值包括浏览器界面元素的高度。- 这个属性的值通常比
window.innerHeight大。
5. screen.height
screen.height 返回用户屏幕的总高度，以像素为单位。这个属性是只读的，返回的值是一个整数，表示整个屏幕的高度。
let screenHeight = screen.height;
console.log(screenHeight);适用场景
screen.height 适用于需要获取用户屏幕总高度的场景，例如在开发全屏应用或需要与屏幕分辨率交互的应用时。
注意事项
screen.height的值表示整个屏幕的高度，而不是浏览器窗口的高度。- 这个属性的值通常比
window.outerHeight大。
6. document.documentElement.scrollHeight
document.documentElement.scrollHeight 返回文档根元素（即 <html> 元素）的总高度，包括由于溢出而不可见的内容。这个属性是只读的，返回的值是一个整数，表示以像素为单位的高度。
let scrollHeight = document.documentElement.scrollHeight;
console.log(scrollHeight);适用场景
document.documentElement.scrollHeight 适用于需要获取整个文档高度的场景，例如在实现无限滚动或需要计算页面总高度时。
注意事项
document.documentElement.scrollHeight的值包括由于溢出而不可见的内容。- 如果页面内容没有溢出，
document.documentElement.scrollHeight的值通常与document.documentElement.clientHeight相同。
7. document.body.scrollHeight
document.body.scrollHeight 返回 <body> 元素的总高度，包括由于溢出而不可见的内容。与 document.documentElement.scrollHeight 类似，但它返回的是 <body> 元素的高度。
let bodyScrollHeight = document.body.scrollHeight;
console.log(bodyScrollHeight);适用场景
document.body.scrollHeight 适用于需要获取 <body> 元素总高度的场景，例如在实现无限滚动或需要计算 <body> 元素的总高度时。
注意事项
document.body.scrollHeight的值包括由于溢出而不可见的内容。- 如果
<body>元素的内容没有溢出，document.body.scrollHeight的值通常与document.body.clientHeight相同。
8. window.scrollY 和 window.pageYOffset
window.scrollY 和 window.pageYOffset 返回文档垂直滚动的像素数。这两个属性是只读的，返回的值是一个浮点数，表示当前垂直滚动的像素数。
let scrollY = window.scrollY;
let pageYOffset = window.pageYOffset;
console.log(scrollY, pageYOffset);适用场景
window.scrollY 和 window.pageYOffset 适用于需要获取文档垂直滚动位置的场景，例如在实现视差滚动或需要根据滚动位置触发某些操作时。
注意事项
window.scrollY和window.pageYOffset的值表示文档垂直滚动的像素数。- 这两个属性的值通常是相同的。
9. window.getComputedStyle
window.getComputedStyle 返回一个包含元素所有计算样式（包括内联样式、外部样式表和浏览器默认样式）的对象。可以通过这个对象获取元素的高度。
let element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);
let height = computedStyle.height;
console.log(height);适用场景
window.getComputedStyle 适用于需要获取元素计算高度的场景，例如在需要精确计算元素高度时。
注意事项
window.getComputedStyle返回的高度是字符串，可能包含单位（如px）。- 这个方法的性能开销较大，应谨慎使用。
10. Element.getBoundingClientRect
Element.getBoundingClientRect 返回一个 DOMRect 对象，包含元素的大小及其相对于视口的位置。可以通过这个对象获取元素的高度。
let element = document.getElementById('myElement');
let rect = element.getBoundingClientRect();
let height = rect.height;
console.log(height);适用场景
Element.getBoundingClientRect 适用于需要获取元素高度及其相对于视口位置的场景，例如在实现拖拽或需要精确计算元素位置时。
注意事项
Element.getBoundingClientRect返回的高度是浮点数，表示元素的实际高度。- 这个方法的性能开销较大，应谨慎使用。
总结
在JavaScript中，获取窗口高度的方法有很多种，每种方法都有其适用的场景和注意事项。window.innerHeight 是最常用的方法，适用于大多数需要获取视口高度的场景。document.documentElement.clientHeight 和 document.body.clientHeight 适用于需要获取不包括滚动条的视口高度的场景。window.outerHeight 和 screen.height 适用于需要获取整个浏览器窗口或屏幕高度的场景。document.documentElement.scrollHeight 和 document.body.scrollHeight 适用于需要获取整个文档或 <body> 元素总高度的场景。window.scrollY 和 window.pageYOffset 适用于需要获取文档垂直滚动位置的场景。window.getComputedStyle 和 Element.getBoundingClientRect 适用于需要精确计算元素高度或位置的场景。
在实际开发中，应根据具体需求选择合适的方法，并注意各种方法的性能开销和返回值类型。通过合理使用这些方法，可以更好地实现响应式设计和动态调整页面布局的需求。
24h全天候在线客服支持
10年互联网服务经验
全国300余家服务机构
70000余家合作企业
