Výška a šírka sú najvýznamnejšie rozmery pri navrhovaní rozloženia webovej stránky.
„Výška“ označuje meranie dĺžky objektu zhora nadol, zatiaľ čo „šírka“ označuje, ako široký je objekt z jednej strany na druhú. Tieto faktory pomáhajú pri úprave priradenia objektu v okne. V JavaScripte je „ výška “ a „ šírka vlastnosti sú ďalej klasifikované do dvoch kategórií „vnútorné“, t. j. „vnútorná výška/vnútorná šírka“ a „vonkajšie“, t. j. „vonkajšia výška/vonkajšia šírka“.
Tento zápis rozvádza cieľ a fungovanie vlastnosti Window „innerHeight“ v JavaScripte.
Čo robí vlastnosť Window „innerHeight“ v JavaScripte?
' vnútorná výška Vlastnosť ” je spojená s objektom „window“, ktorý získava výšku výrezu okna prehliadača s výnimkou panela s umiestnením, panela s nástrojmi, panela s ponukami a ďalších. Zahŕňa aj výšku vodorovného posúvača, ak je zahrnutý. Vrátená hodnota tejto vlastnosti je prevzatá z okna „layout viewport“, t. j. oblasti, ktorá zobrazuje obsah webovej stránky.
Základná syntax
window.innerHeight ALEBO innerHeight
Podľa vyššie uvedenej syntaxe „ vnútorná výška ” vlastnosť možno jednoducho použiť priamo alebo pomocou objektu „window“.
Implementujme vyššie definovanú vlastnosť prakticky pomocou jej základnej syntaxe.
Príklad 1: Použitie vlastnosti Window „innerHeight“ na vrátenie výšky výrezu okna prehliadača
Tento príklad využíva vlastnosť „innerHeight“ s objektom „window“ na získanie výšky výrezu okna prehliadača.
HTML kód
Najprv sa pozrite na nižšie uvedený kód:
< h2 > Vlastnosť vnútornej výšky okna h2 >< tlačidlo po kliknutí = 'jsFunc()' > Získajte výšku tlačidlo >
< p id = 'pre' > p >
Vo vyššie uvedených riadkoch kódu:
- ' ” tag definuje podnadpis 2. úrovne.
- '
Značka ” predstavuje tlačidlo s udalosťou „onclick“ na vyvolanie funkcie „jsFunc()“ pri spustení udalosti. - ' ” tag pridá prázdny odsek s priradeným id “para” na zobrazenie vrátenej hodnoty použitej vlastnosti “innerHeight”.
JavaScript kód
Teraz pokračujte s nižšie uvedeným kódom:
< skript >funkciu jsFunc ( ) {
nech h = window.innerHeight;
document.getElementById ( 'pre' ) .innerHTML = 'Vnútorná výška okna: ' + h;
}
skript >
Vo vyššie uvedených riadkoch kódu:
- Najprv definujte funkciu s názvom „ jsFunc() “.
- Vo svojej definícii premenná „h“ aplikuje „ vnútorná výška ” pomocou objektu “window”.
- Potom použite „ getElementById() “, aby ste získali pridaný prázdny odsek pomocou jeho ID „para“ a zobrazili v ňom vnútornú výšku aktuálneho okna prehliadača.
Výkon
Ako je uvedené vo vyššie uvedenom výstupe, aktuálne okno prehliadača zobrazuje výšku výrezu (vnútornú výšku), t.j. 599 pixelov “ po kliknutí na tlačidlo.
Príklad 2: Použitie vlastností kombinovaného okna „innerHeight“ a „innerWidth“.
Vlastnosť „innerHeight“ môže byť implementovaná spolu s inými vlastnosťami dimenzií, ako sú „innerWidth“, „outerWidth“, „outerHeight“ atď. V tomto scenári sa používa spolu s „ vnútorná šírka ' nehnuteľnosť.
HTML kód
Pozrime sa na upravený HTML kód:
< h2 > Vlastnosti okna innerHeight a innerWidth h2 >< tlačidlo po kliknutí = 'jsFunc()' > Získajte výšku a šírku tlačidlo >
< p id = 'pre' > p >
Tu je obsah prvkov „