A weboldal elrendezésének megtervezésekor a magasság és a szélesség a legjelentősebb méretek.
A „magasság” jelzi az objektum hosszának mérését felülről lefelé, míg a „szélesség” azt jelzi, hogy az objektum milyen széles az egyik oldalról a másikra. Ezek a tényezők segítenek egy objektum kiosztásának beállításában az ablakban. A JavaScriptben a „ magasság ” és „ szélesség ” tulajdonságok további két kategóriába sorolhatók: „belső”, azaz „belső magasság/belső szélesség” és „külső”, azaz „külső magasság/külső szélesség”.
Ez az írás a JavaScript ablak „innerHeight” tulajdonságának célját és működését részletezi.
Mit csinál az ablak „innerHeight” tulajdonsága a JavaScriptben?
A ' belső magasság ” tulajdonság a „window” objektumhoz van társítva, amely lekéri a böngészőablak nézetablakának magasságát, kivéve a helysort, az eszköztárat, a menüsort és egyebeket. Ezenkívül tartalmazza a vízszintes görgetősáv magasságát is, ha szerepel. Ennek a tulajdonságnak a visszaadott értéke az ablak „elrendezési nézetablakából”, azaz a weboldal tartalmát megjelenítő területről származik.
Alapszintaxis
ablak.innerHeight VAGY innerHeight
A fenti szintaxis szerint a „ belső magasság ” tulajdonság könnyen alkalmazható közvetlenül vagy az „ablak” objektum használatával.
Valósítsuk meg a fent definiált tulajdonságot gyakorlatilag az alapszintaxis segítségével.
1. példa: Az ablak „innerHeight” tulajdonságának alkalmazása a böngészőablak nézetablak magasságának visszaadásához
Ez a példa az „innerHeight” tulajdonságot használja a „window” objektummal a böngészőablak nézetablak magasságának lekéréséhez.
HTML kód
Először is nézze meg az alábbi kódot:
< h2 > Ablak belső magasság tulajdonsága h2 >< gomb kattintásra = 'jsFunc()' > Szerezzen magasságot gomb >
< p id = 'for' > p >
A fenti kódsorokban:
- A ' ” címke határozza meg a 2. szintű alcímet.
- A '
” címke azt a gombot jelöli, amely egy „onclick” eseménnyel rendelkezik a „jsFunc()” függvény meghívásához, amikor az esemény kivált. - A ' ” címke hozzáad egy üres bekezdést egy hozzárendelt „para” azonosítóval, hogy megjelenítse az alkalmazott „innerHeight” tulajdonság visszaadott értékét.
JavaScript kód
Most folytassa az alábbi kóddal:
< forgatókönyv >funkció jsFunc ( ) {
hagyja h = ablak.belső magasság;
document.getElementById ( 'for' ) .innerHTML = 'Ablak belső magassága:' + h;
}
forgatókönyv >
A fenti kódsorokban:
- Először definiáljon egy '' nevű függvényt jsFunc() ”.
- Definíciójában a „h” változó a „ belső magasság ” tulajdonság a „window” objektum használatával.
- Ezt követően alkalmazza a „ getElementById() ” metódussal kapja meg a hozzáadott üres bekezdést a „para” azonosítójával, és jelenítse meg benne az aktuális böngészőablak belső magasságát.
Kimenet
Ahogy a fenti kimenet mutatja, az aktuális böngészőablak a nézetablak magasságát (belső magasságát) jeleníti meg, azaz: 599 képpont ” gombnyomásra.
2. példa: A kombinált ablak „innerHeight” és „innerWidth” tulajdonságok alkalmazása
Az „innerHeight” tulajdonság a többi dimenziótulajdonság mellett is megvalósítható, például „innerWidth”, „outerWidth”, „outerHeight” stb. Ebben a forgatókönyvben a „ belső szélesség ' ingatlan.
HTML kód
Tekintsük át a módosított HTML-kódot:
< h2 > Ablak innerHeight és innerWidth tulajdonságai h2 >< gomb kattintásra = 'jsFunc()' > Szerezzen magasságot és szélességet gomb >
< p id = 'for' > p >
Itt a „