JavaScript/DOM/Event/resize

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Für die gleichnamige CSS-Eigenschaft siehe CSS/Eigenschaften/Anzeige/resize.



Event-Handler JavaScript 1.0 DOM 1.0 resize
Bedeutung Für die Überwachung der Fenstergröße wird der Event-Handler resize 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
Elternelemente Darf vorkommen in: body
Event-Objekt Event
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel


Beispiel ansehen …
window.addEventListener('resize', Ändern);
 
function Ändern(){
    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;
}
Beachten Sie

Dieses Beispiel funktioniert nicht im IE8 , da er outerWidth und outerHeight nicht kennt.

Tipp

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

Quellen
  1. MDN: resize
siehe auch

{{{siehe_auch}}}

Weblinks

{{{Weblinks}}}

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML