Höjd och bredd är de mest betydande dimensionerna när man utformar layouten på en webbsida.
'Höjden' anger måttet på ett objekts längd från topp till botten medan 'bredd' anger hur brett ett objekt är från ena sidan till den andra. Dessa faktorer hjälper till att justera allokeringen av ett objekt i fönstret. I JavaScript är ' höjd ' och ' bredd ' egenskaper klassificeras vidare i två kategorier 'inre', dvs. 'innerHeight/innerWidth', respektive 'outer', dvs. 'outerHeight/outerWidth', respektive.
Den här texten utvecklar syftet med och hur Window 'innerHeight'-egenskapen fungerar i JavaScript.
Vad gör fönsteregenskapen 'innerHeight' i JavaScript?
den ' innerhöjd ”-egenskapen är associerad med ”window”-objektet som hämtar viewporthöjden för webbläsarfönstret exklusive platsfältet, verktygsfältet, menyraden och andra. Det inkluderar också höjden på den horisontella rullningslisten om den ingår. Det returnerade värdet för den här egenskapen tas från fönstret 'layout viewport', dvs ett område som visar webbsidans innehåll.
Grundläggande syntax
window.innerHeight ELLER innerHeight
Enligt ovanstående syntax, ' innerhöjd Egenskapen kan enkelt appliceras direkt eller med hjälp av objektet 'fönster'.
Låt oss implementera den ovan definierade egenskapen praktiskt taget med hjälp av dess grundläggande syntax.
Exempel 1: Använda egenskapen Window 'innerHeight' för att återställa visningsporthöjden för webbläsarfönstret
Det här exemplet använder egenskapen 'innerHeight' med objektet 'window' för att hämta visningsporthöjden för webbläsarfönstret.
HTML-kod
Ta först en titt på nedanstående kod:
< h2 > Fönster innerhöjd egenskap h2 >< knapp onclick = 'jsFunc()' > Få höjd knapp >
< sid id = 'för' > sid >
I ovanstående kodrader:
- den ' ”-taggen definierar nivå 2 underrubrik.
- den '
”-taggen representerar knappen som har en ”onclick”-händelse för att anropa funktionen ”jsFunc()” när händelsen utlöses. - den ' '-taggen lägger till ett tomt stycke med ett tilldelat id 'para' för att visa det returnerade värdet för den tillämpade 'innerHeight'-egenskapen.
JavaScript-kod
Fortsätt nu med nedanstående kod:
< manus >fungera jsFunc ( ) {
låta h = window.innerHeight;
document.getElementById ( 'för' ) .innerHTML = 'Fönster inre höjd: ' + h;
}
manus >
I kodraderna ovan:
- Först definierar du en funktion som heter ' jsFunc() ”.
- I sin definition tillämpar variabeln 'h' ' innerhöjd ”-egenskapen med hjälp av ”window”-objektet.
- Efter det, använd ' getElementById() ”-metoden för att få det tillagda tomma stycket med dess id “para” och visa det aktuella webbläsarfönstrets inre höjd i det.
Produktion
Som visas i ovanstående utdata visar det aktuella webbläsarfönstret visningsportens höjd (inre höjd), dvs. 599 pixlar ” vid knappklick.
Exempel 2: Tillämpa det kombinerade fönstret 'innerHeight' och 'innerWidth' egenskaper
Egenskapen 'innerHeight' kan implementeras tillsammans med de andra dimensionsegenskaperna såsom 'innerWidth', 'outerWidth', 'outerHeight' etc. I det här scenariot används den tillsammans med ' inreBredd ' fast egendom.
HTML-kod
Låt oss få en översikt över den modifierade HTML-koden:
< h2 > Fönster inneregenskaper Höjd och innerbredd h2 >< knapp onclick = 'jsFunc()' > Få höjd och bredd knapp >
< sid id = 'för' > sid >
Här ändras innehållet i '