Výška a šířka jsou nejvýznamnější rozměry při navrhování rozvržení webové stránky.
„Výška“ označuje měření délky objektu shora dolů, zatímco „šířka“ označuje, jak široký je objekt z jedné strany na druhou. Tyto faktory pomáhají při úpravě alokace objektu v okně. V JavaScriptu „ výška ' a ' šířka “ vlastnosti jsou dále klasifikovány do dvou kategorií „vnitřní“, tj. „vnitřní výška/vnitřní šířka“ a „vnější“, tj. „vnější výška/vnější šířka“.
Tento zápis rozvádí účel a fungování vlastnosti Window „innerHeight“ v JavaScriptu.
Co dělá vlastnost Window „innerHeight“ v JavaScriptu?
' vnitřní výška Vlastnost ” je spojena s objektem „window“, který získává výšku výřezu okna prohlížeče s výjimkou umístění, panelu nástrojů, panelu nabídek a dalších. Zahrnuje také výšku vodorovného posuvníku, pokud je zahrnut. Vrácená hodnota této vlastnosti je převzata z okna „layout viewport“, tj. oblasti, která zobrazuje obsah webové stránky.
Základní syntaxe
window.innerHeight NEBO innerHeight
Podle výše uvedené syntaxe je „ vnitřní výška Vlastnost ” lze snadno aplikovat přímo nebo pomocí objektu „window“.
Implementujme výše definovanou vlastnost prakticky pomocí její základní syntaxe.
Příklad 1: Použití vlastnosti Window „innerHeight“ k vrácení výšky výřezu okna prohlížeče
Tento příklad využívá vlastnost „innerHeight“ s objektem „window“ k načtení výšky výřezu okna prohlížeče.
HTML kód
Nejprve se podívejte na níže uvedený kód:
< h2 > Vlastnost okna innerHeight h2 >< knoflík při kliknutí = 'jsFunc()' > Získejte výšku knoflík >
< p id = 'pro' > p >
Ve výše uvedených řádcích kódu:
- ' tag ” definuje podnadpis 2. úrovně.
- '
Značka ” představuje tlačítko s událostí „onclick“ pro vyvolání funkce „jsFunc()“, když je událost spuštěna. - ' Tag přidá prázdný odstavec s přiřazeným id „para“, aby se zobrazila vrácená hodnota použité vlastnosti „innerHeight“.
JavaScript kód
Nyní pokračujte s níže uvedeným kódem:
< skript >funkce jsFunc ( ) {
nechat h = window.innerHeight;
document.getElementById ( 'pro' ) .innerHTML = 'Vnitřní výška okna: ' + h;
}
skript >
Ve výše uvedených řádcích kódu:
- Nejprve definujte funkci s názvem „ jsFunc() “.
- Proměnná „h“ ve své definici používá „ vnitřní výška ” pomocí objektu „window“.
- Poté použijte „ getElementById() ” metodu získat přidaný prázdný odstavec pomocí jeho id „para“ a zobrazit v něm vnitřní výšku aktuálního okna prohlížeče.
Výstup
Jak je ukázáno ve výše uvedeném výstupu, aktuální okno prohlížeče zobrazuje výšku výřezu (vnitřní výšku), tj. 599 pixelů “ po kliknutí na tlačítko.
Příklad 2: Použití vlastností kombinovaného okna „innerHeight“ a „innerWidth“.
Vlastnost „innerHeight“ může být implementována spolu s dalšími vlastnostmi dimenzí, jako jsou „innerWidth“, „outerWidth“, „outerHeight“ atd. V tomto scénáři se používá spolu s „ vnitřní šířka ' vlastnictví.
HTML kód
Podívejme se na upravený HTML kód:
< h2 > Vlastnosti okna innerHeight a innerWidth h2 >< knoflík při kliknutí = 'jsFunc()' > Získejte výšku a šířku knoflík >
< p id = 'pro' > p >
Zde je obsah prvků „