JavaScript/Window/outerHeight

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft Window.outerHeight speichert die Gesamthöhe eines Fensters inklusive Titelleiste, Menüleiste, Statuszeile usw.

  • JavaScript 1.2
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • Nur Lesen / Read Only

Syntax

hoehe = Window.outerHeight;

[Bearbeiten] Anwendungsbeispiel

Zum Berechnen der Viewport- und Geräteabmessungen gibt es verschiedene Eigenschaften:

Beispiel: Viewportabmessungen ansehen …
  document.addEventListener('DOMContentLoaded',messen);
  document.addEventListener('resize',messen);
 
  function messen() { 
    document.getElementById('clientW').textContent = document.querySelector('html').clientWidth;
    document.getElementById('innerW').textContent = window.innerWidth;
    document.getElementById('outerW').textContent = window.outerWidth;
    document.getElementById('clientH').textContent = document.querySelector('html').clientHeight;
    document.getElementById('innerH').textContent = window.innerHeight;
    document.getElementById('outerH').textContent = window.outerHeight;	
    document.getElementById('screenW').textContent = screen.width;
    document.getElementById('availW').textContent = screen.availWidth;
    document.getElementById('screenH').textContent = screen.height;
    document.getElementById('availH').textContent = screen.availHeight;		
  }
Sowohl beim Laden, als auch bei einer Änderung des Viewports, wenn das resize-Event gefeuert wird, wird die Funktion messen aufgerufen.
In ihr werden die diversen Eigenschaften ermittelt und mit textContent in die passenden span-Elemente geschrieben.

Window.innerWidth und Window.innerHeight ermitteln die verfügbare Breite und Höhe des Viewports, während Window.outerWidth und Window.outerHeight eventuell vorhandene Scrollbars mitberechnen.

Screen.width und Screen.height ermitteln die Breite und Höhe des Bildschirms, während Screen.availWidth und Screen.availHeight die tatsächlich verfügbaren Maße ermitteln, indem sie vorhandene Taskbars abziehen.

Empfehlung: Benutzen Sie die innerWidth und innerHeight Eigenschaften, um die Breite, bzw. Höhe ohne scrollbars zu erhalten.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML