Window: innerHeight Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte innerHeight Eigenschaft der
Window Schnittstelle gibt die innere Höhe des Fensters in Pixeln zurück,
einschließlich der Höhe der horizontalen Scrollleiste, falls vorhanden.
Der Wert von innerHeight wird von der Höhe des
layout viewports des Fensters abgeleitet. Die Breite kann mithilfe der
innerWidth Eigenschaft ermittelt werden.
Wert
Ein Integer-Wert, der die Layout-Viewport-Höhe des Fensters in Pixeln angibt. Die Eigenschaft ist schreibgeschützt und hat keinen Standardwert.
Um die Höhe des Fensters zu ändern, rufen Sie eine der Resize-Methoden auf, wie z.B.
resizeTo() oder resizeBy().
Anwendungshinweise
Um die Höhe des Fensters ohne die horizontale Scrollleiste und jegliche Ränder zu erhalten, verwenden Sie
stattdessen die clientHeight Eigenschaft des Wurzel-<html>-Elements.
Sowohl innerHeight als auch innerWidth sind bei jedem Fenster
oder einem Objekt, das sich wie ein Fenster verhält, wie etwa ein Tab oder Frame, verfügbar.
Beispiele
Annahme eines Framesets
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
Um die Größe eines Fensters zu ändern, siehe window.resizeBy() und
window.resizeTo().
Um die äußere Höhe eines Fensters zu erhalten, d.h. die Höhe des gesamten Browserfensters, siehe
window.outerHeight.
Grafisches Beispiel
Die folgende Abbildung zeigt den Unterschied zwischen outerHeight und
innerHeight.
Demo
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
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);
Ergebnis
Sie können auch die Ergebnisse des Demo-Codes auf einer separaten Seite anzeigen.
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # dom-window-innerheight |