Höhe und Breite sind die wichtigsten Maße bei der Gestaltung des Layouts einer Webseite.
Die „Höhe“ gibt das Maß der Länge eines Objekts von oben nach unten an, während die „Breite“ angibt, wie breit ein Objekt von einer Seite zur anderen Seite ist. Diese Faktoren helfen bei der Anpassung der Zuordnung eines Objekts im Fenster. In JavaScript ist das „ Höhe ' Und ' Breite „Eigenschaften werden weiter in zwei Kategorien eingeteilt: „inner“, d. h. „innerHeight/innerWidth“, und „outer“, d. h. „outerHeight/outerWidth“.
Dieser Artikel erläutert das Ziel und die Funktionsweise der Window-Eigenschaft „innerHeight“ in JavaScript.
Was bewirkt die Window-Eigenschaft „innerHeight“ in JavaScript?
Der ' innereHöhe Die Eigenschaft „window“ ist mit dem „window“-Objekt verknüpft, das die Höhe des Ansichtsfensters des Browserfensters abruft, mit Ausnahme der Positionsleiste, Symbolleiste, Menüleiste und anderer. Außerdem wird die Höhe der horizontalen Bildlaufleiste berücksichtigt, sofern diese enthalten ist. Der zurückgegebene Wert dieser Eigenschaft wird dem „Layout-Ansichtsfenster“ des Fensters entnommen, d. h. einem Bereich, der den Inhalt der Webseite anzeigt.
Grundlegende Syntax
window.innerHeight ODER innerHeight
Gemäß der obigen Syntax ist das „ innereHöhe Die Eigenschaft „“ kann einfach direkt oder über das „window“-Objekt angewendet werden.
Lassen Sie uns die oben definierte Eigenschaft mithilfe ihrer grundlegenden Syntax praktisch implementieren.
Beispiel 1: Anwenden der Fenstereigenschaft „innerHeight“, um die Ansichtsfensterhöhe des Browserfensters zurückzugeben
In diesem Beispiel wird die Eigenschaft „innerHeight“ mit dem Objekt „window“ verwendet, um die Höhe des Ansichtsfensters des Browserfensters abzurufen.
HTML Quelltext
Schauen Sie sich zunächst den unten aufgeführten Code an:
< h2 > Window innerHeight-Eigenschaft h2 >< Taste onclick = „jsFunc()“ > Höhe ermitteln Taste >
< P Ausweis = 'für' > P >
In den obigen Codezeilen:
- Der ' „Tag definiert die Unterüberschrift der Ebene 2.
- Der '
Das Tag „ stellt die Schaltfläche mit einem „onclick“-Ereignis dar, um die Funktion „jsFunc()“ aufzurufen, wenn das Ereignis ausgelöst wird. - Der ' Das Tag „Fügt einen leeren Absatz mit der zugewiesenen ID „para“ hinzu, um den zurückgegebenen Wert der angewendeten Eigenschaft „innerHeight“ anzuzeigen.
JavaScript-Code
Fahren Sie nun mit dem unten angegebenen Code fort:
< Skript >Funktion jsFunc ( ) {
lassen h = window.innerHeight;
document.getElementById ( 'für' ) .innerHTML = „Innenhöhe des Fensters:“ + h;
}
Skript >
In den obigen Codezeilen:
- Definieren Sie zunächst eine Funktion mit dem Namen „ jsFunc() “.
- In ihrer Definition wendet die Variable „h“ das „ innereHöhe ”-Eigenschaft mithilfe des „window“-Objekts.
- Wenden Sie danach das „ getElementById() ”-Methode, um den hinzugefügten leeren Absatz mithilfe seiner ID „para“ abzurufen und darin die Innenhöhe des aktuellen Browserfensters anzuzeigen.
Ausgang
Wie in der obigen Ausgabe gezeigt, zeigt das aktuelle Browserfenster die Höhe des Ansichtsfensters (innere Höhe) an, d. h. „ 599px ” beim Klicken auf die Schaltfläche.
Beispiel 2: Anwenden der kombinierten Fenstereigenschaften „innerHeight“ und „innerWidth“.
Die Eigenschaft „innerHeight“ kann zusammen mit den anderen Dimensionseigenschaften wie „innerWidth“, „outerWidth“, „outerHeight“ usw. implementiert werden. In diesem Szenario wird sie zusammen mit „ innerWidth ' Eigentum.
HTML Quelltext
Werfen wir einen Überblick über den geänderten HTML-Code:
< h2 > Fenstereigenschaften „innerHeight“ und „innerWidth“. h2 >< Taste onclick = „jsFunc()“ > Holen Sie sich Höhe und Breite Taste >
< P Ausweis = 'für' > P >
Dabei wird der Inhalt der Elemente „