Window: Eigenschaft innerWidth

Die schreibgeschützte Window-Eigenschaft innerWidth gibt die Innenbreite des Fensters in Pixeln zurück (d.h. die Breite des Layout-Viewports des Fensters). Dies schließt die Breite der vertikalen Scrollleiste ein, falls vorhanden.

Ähnlich kann die Innenhöhe des Fensters (d.h. die Höhe des Layout-Viewports) mit der innerHeight-Eigenschaft ermittelt werden. Diese Messung berücksichtigt auch die Höhe der horizontalen Scrollleiste, wenn sie sichtbar ist.

Wert

Ein ganzzahliger Wert, der die Breite des Layout-Viewports des Fensters in Pixeln angibt. Diese Eigenschaft ist schreibgeschützt und hat keinen Standardwert.

Um die Breite des Fensters zu ändern, verwenden Sie eine der Window-Methoden zum Ändern der Fenstergröße, wie zum Beispiel resizeBy() oder resizeTo().

Nutzungshinweise

Wenn Sie die Breite des Fensters abzüglich der Scrollleiste und der Ränder benötigen, verwenden Sie stattdessen die clientWidth-Eigenschaft des Wurzelelements <html>.

Die innerWidth-Eigenschaft ist auf jedem Fenster oder Objekt verfügbar, das sich wie ein Fenster verhält, wie zum Beispiel ein Frame oder Tab.

Beispiele

js
// This will log the width of the viewport
console.log(window.innerWidth);

// This will log the width of the frame viewport within a frameset
console.log(self.innerWidth);

// This will log the width of the viewport of the closest frameset
console.log(parent.innerWidth);

// This will log the width of the viewport of the outermost frameset
console.log(top.innerWidth);

Demo

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);

Ergebnis

Sie können auch die Ergebnisse des Demo-Codes auf einer separaten Seite anzeigen.

Spezifikationen

Specification
CSSOM View Module
# dom-window-innerwidth

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch