JavaScript/DOM/Event/resize

Der Begriff resize ist mehrdeutig.
Für die gleichnamige CSS-Eigenschaft siehe CSS/Eigenschaften/resize.

Der resize-Event-Handler wird für die Überwachung der Fenstergröße verwendet. Dieser Event-Handler tritt ein, wenn der Anwender die Fenstergröße ändert. Sie können diesem Event-Handler eine Funktion zuordnen, die bei Größenänderungen ausgeführt wird.

bubbles	nein
cancelable	nein
mögliche Auslöser	body
Event-Objekt	Event

Beispiel ansehen …

window.addEventListener('resize', changeSize);

function changeSize(){
    var w=window.outerWidth;
    var h=window.outerHeight;
    var txt='<b>Fenstergröße:</b><br> Breite=' + w + 'px<br> Höhe=' + h+'px';
    document.getElementById('ausgabe').innerHTML=txt;
}

Empfehlung: Da der resize-Event-Handler bei jeder Pixel-Änderung feuert, sollten Sie auf den Einsatz rechenintensiver DOM-Änderungen verzichten oder mit requestAnimationFrame oder matchMedia realisieren.

Siehe auch

• JavaScript und CSS
  • CSS-Eigenschaften auslesen
    resizes mit matchMedia()

Weblinks