Eigenschaften von window: Breite und Höhe

Unser Element „window“ hat verschiedene Eigenschaften, die wir abfragen können. Dazu gehörten die Breite und die Höhe des Fensters. Hierbei haben wir sogar 2 unterschiedliche Werte bei der Breite und auch 2 unterschiedliche Werte bei der Höhe.

Über folgenden Befehlsaufbau erhalten wir den Wert – im folgenden Beispiel für die I

innere Breite:

console.log(window.innerWidth);

Wir haben also die Werte für den Fensterbereich mit dem für den Nutzer sichtbaren Inhalt und wir haben die komplette benötigte Werte für den kompletten Fensterbereich, da ja jedes Fenster noch Platz für den Kopfbereich und die Rahmen um den Inhalt benötigt. Dazu gibt es die folgenden 4 Werte:

• innerWidth – Breite des Browserfensters ohne Rahmen
• outerWidth - Breite des Browserfensters mit Rahmen
• innerHeight – Höhe des Browserfensters ohne Rahmen
• outerHeight – Höhe des Browserfensters mit Rahmen

Wenn wir folgendes Beispiel ausführen lassen, sehen wir die unterschiedlichen Werte.

console.log("innerWidth:" + window.innerWidth); 
console.log("outerWidth:" + window.outerWidth); 
console.log("innerHeight:" + window.innerHeight); 
console.log("outerHeight:" + window.outerHeight); 

Auf diese Weise können diese Werte abgefragt werden und entsprechend darauf reagiert werden. Wenn Beispielsweise eine zu kleine Fensterbreite vorhanden ist, kann ein Feedback an den Nutzer gegeben werden.

Alle 4 Werte können nur ausgelesen werden – ein Setzen eines Wertes ist nicht möglich. Wir haben also über diese Variante keine Möglichkeit die Fenstergröße zu steuern!