Fenstergrößenänderungsereignis in JavaScript
-
Hinzufügen eines Größenänderungsereignisses mit der Funktion
addEventListener()in JavaScript -
Hinzufügen eines Resize-Events mit der Funktion
onresize()in JavaScript
In diesem Tutorial wird das Hinzufügen eines Größenänderungsereignisses mit den Funktionen addEventListener() und onresize() in JavaScript erläutert.
Hinzufügen eines Größenänderungsereignisses mit der Funktion addEventListener() in JavaScript
Um dem Fenster ein Größenänderungsereignis hinzuzufügen, können wir die Funktion addEventListener() in JavaScript verwenden. Diese Funktion fügt einem Objekt ein Ereignis hinzu, das eine Funktion enthält. Fügen wir beispielsweise dem Objektfenster ein Ereignis hinzu, um dessen Breite und Höhe zu ermitteln und auf der Webseite anzuzeigen. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Ausgabe:
Width = 798
Height = 779
Im obigen Code haben wir einen Span mit dem Text Width= hinzugefügt, und danach haben wir einen leeren Span mit der ID SpanID1 im Body-Abschnitt hinzugefügt. Wir haben ein br-Tag hinzugefügt, um den Cursor in eine neue Zeile zu bewegen, und in der neuen Zeile haben wir einen weiteren Span mit dem Text Height= hinzugefügt, und danach haben wir einen weiteren leeren Span mit der ID SpanID2 hinzugefügt.
Die ID des Spans wird verwendet, um das Element in JavaScript abzurufen. Im script-Tag haben wir eine Funktion start(), die verwendet wird, um den Text der beiden Spans mit der Breite und Höhe des Fensters zu ändern. Nach der Funktion start() haben wir das resize-Ereignis hinzugefügt, das die Funktion start() aufruft, wenn ein Benutzer die Größe des Fensters ändert. Die Breite und Höhe des Fensters werden auf der Seite angezeigt und ändern sich, wenn die Größe des Fensters geändert wird. Sie können den obigen Code in einer HTML-Datei speichern und mit einem beliebigen Browser öffnen und seine Größe ändern, um zu sehen, ob der Code funktioniert oder nicht. Sie können auch die Funktion addEventListener() verwenden, um einem beliebigen Objekt ein Ereignis hinzuzufügen, beispielsweise ein Kontrollkästchen.
Hinzufügen eines Resize-Events mit der Funktion onresize() in JavaScript
Um dem Fenster ein Resize-Event hinzuzufügen, können wir die Funktion onresize() in JavaScript verwenden. Diese Funktion wird verwendet, um festzulegen, was passiert, wenn die Größe eines Fensters geändert wird. Fügen wir beispielsweise dem Objektfenster ein Ereignis hinzu, um dessen Breite und Höhe zu ermitteln und auf der Webseite anzuzeigen. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Ausgabe:
Width = 798
Height = 779
Im obigen Code wird die Funktion start() aufgerufen, wenn die Größe des Fensters geändert wird. Wie Sie sehen, ist die Ausgabe die gleiche wie bei der obigen Methode.
