Window: innerHeight 属性
innerHeight 是 Window 接口的一个只读属性，以像素为单位返回窗口的内部高度，包括水平滚动条的高度（如果存在）。
innerHeight 的值取自窗口的 布局视口 的高度。可以使用 innerWidth 属性获取宽度。
值
一个整数，表示窗口布局视口的高度（以像素为单位）。该属性为只读属性，没有默认值。
要更改窗口的高度，请调用其其中一个调整大小方法，例如 resizeTo() 或 resizeBy()。
使用说明
要获取窗口高度减去其水平滚动条和任何边框的高度，请改用根 <html> 元素的 clientHeight 属性。
innerHeight 和 innerWidth 都可以在任何窗口或任何表现得像窗口的对象（如选项卡或框架）上使用。
示例
假设一个框架集
js
console.log(window.innerHeight); // or
console.log(self.innerHeight);
// will log the height of the frame viewport within the frameset
console.log(parent.innerHeight);
// will log the height of the viewport of the closest frameset
console.log(top.innerHeight);
// will log the height of the viewport of the outermost frameset
要更改窗口的大小，请参阅 window.resizeBy() 和 window.resizeTo()。
要获取窗口的外部高度，即整个浏览器窗口的高度，请参阅 window.outerHeight。
图形示例
下图显示了 outerHeight 和 innerHeight 之间的区别。
演示
HTML
html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
JavaScript
js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function updateSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
updateSize();
window.addEventListener("resize", updateSize);
结果
您也可以 在单独的页面中查看演示代码的结果。
规范
| 规范 |
|---|
| CSSOM 视图模块 # dom-window-innerheight |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。