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 |
瀏覽器相容性
載入中…