Window：innerHeight 属性
Window 接口的只读 innerHeight 属性返回窗口的内部高度（以像素为单位），如果存在水平滚动条，则包含其高度。
innerHeight 的值来自窗口的布局视口的高度。可以使用innerWidth 属性获取宽度。
值
一个整数值，表示窗口的布局视口高度（以像素为单位）。此属性是只读的，没有默认值。
要更改窗口的高度，请调用其 resize 方法之一，例如resizeTo() 或resizeBy()。
用法说明
要获取窗口高度减去其水平滚动条和任何边框的高度，请改用根<html> 元素的clientHeight 属性。
innerHeight 和 innerWidth 在任何窗口或任何表现得像窗口的对象（例如选项卡或框架）上都可用。
示例
假设一个 frameset
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 |
浏览器兼容性
加载中…