Baseline Widely available
Das resize-Ereignis wird ausgelöst, wenn die Dokumentansicht (Fenster) in ihrer GröÃe verändert wird.
Dieses Ereignis kann nicht abgebrochen werden und propagiert nicht.
In einigen älteren Browsern war es möglich, resize-Ereignishandler für jedes HTML-Element zu registrieren. Es ist immer noch möglich, onresize-Attribute zu setzen oder addEventListener() zu verwenden, um einen Handler für jedes Element festzulegen. Allerdings werden resize-Ereignisse nur auf dem window-Objekt ausgelöst (d.h. zurückgegeben von document.defaultView). Nur Handler, die auf dem window-Objekt registriert sind, empfangen resize-Ereignisse.
Während das resize-Ereignis heutzutage nur für das Fenster ausgelöst wird, können Sie Resize-Benachrichtigungen für andere Elemente über die ResizeObserver-API erhalten.
Falls das resize-Ereignis zu häufig für Ihre Anwendung ausgelöst wird, lesen Sie Optimizing window.onresize, um zu steuern, nach welcher Zeitspanne das Ereignis ausgelöst wird.
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("resize", (event) => { })
onresize = (event) => { }
Ein generisches Event.
Das folgende Beispiel gibt die FenstergröÃe jedes Mal an, wenn sie geändert wird.
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>
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;
Hinweis: Die Beispielausgabe hier befindet sich in einem <iframe>, daher sind die angegebenen Breiten- und Höhenwerte für das <iframe>, nicht für das Fenster, in dem sich diese Seite befindet. Insbesondere wird es schwierig sein, die FenstergröÃe so anzupassen, dass ein Unterschied in der angegebenen Höhe sichtbar wird.
Der Effekt lässt sich leichter erkennen, wenn Sie das Beispiel in einem eigenen Fenster anzeigen.
addEventListener-ÃquivalentSie könnten den Ereignishandler auch mithilfe der addEventListener()-Methode einrichten:
window.addEventListener("resize", reportWindowSize);
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4