Højden og bredden er de mest betydelige dimensioner, når man designer layoutet af en webside.
'Højden' angiver målingen af en genstands længde fra top til bund, mens 'bredden' angiver, hvor bred en genstand er fra den ene side til den anden side. Disse faktorer hjælper med at justere allokeringen af et objekt i vinduet. I JavaScript er ' højde ' og ' bredde ” egenskaber er yderligere klassificeret i to kategorier “indre”, dvs. henholdsvis “innerHeight/innerWidth”, og “outer” dvs. “outerHeight/outerWidth”.
Denne skrive-up uddyber formålet med og virkemåden af vinduets 'innerHeight'-egenskaben i JavaScript.
Hvad gør vinduet 'innerHeight'-ejendommen i JavaScript?
Det ' indre Højde ”-egenskaben er knyttet til “window”-objektet, der henter viewport-højden af browservinduet, eksklusive placeringslinjen, værktøjslinjen, menulinjen og andre. Det inkluderer også højden af den vandrette rullebjælke, hvis den er inkluderet. Den returnerede værdi af denne egenskab er taget fra vinduet 'layout viewport', dvs. et område, der viser websidens indhold.
Grundlæggende syntaks
vindue.indreHøjde ELLER indreHøjde
Ifølge ovenstående syntaks er ' indre Højde egenskaben kan nemt anvendes direkte eller ved hjælp af 'vindue'-objektet.
Lad os implementere den ovenfor definerede egenskab praktisk talt ved hjælp af dens grundlæggende syntaks.
Eksempel 1: Anvendelse af vinduet 'innerHeight'-egenskaben til at returnere Viewport-højden for browservinduet
Dette eksempel bruger egenskaben 'innerHeight' med 'window'-objektet til at hente viewport-højden for browservinduet.
HTML kode
Først skal du tage et kig på nedenstående kode:
< h2 > Vindue indreHøjde Ejendom h2 >< knap onclick = 'jsFunc()' > Få højde knap >
< s id = 'til' > s >
I ovenstående kodelinjer:
- Det ' ” tag definerer niveau 2 underoverskriften.
- Det '
” tag repræsenterer knappen med en “onclick” hændelse for at påkalde funktionen ”jsFunc()”, når hændelsen udløses. - Det ' ” tag tilføjer et tomt afsnit med et tildelt id “para” for at vise den returnerede værdi af den anvendte “innerHeight” egenskab.
JavaScript kode
Fortsæt nu med nedenstående kode:
< manuskript >fungere jsFunc ( ) {
lade h = vindue.indreHøjde;
document.getElementById ( 'til' ) .innerHTML = 'Vinduets indre højde:' + h;
}
manuskript >
I ovenstående kodelinjer:
- Først skal du definere en funktion ved navn ' jsFunc() '.
- I sin definition anvender 'h'-variablen ' indre Højde ' egenskab ved hjælp af 'vindue'-objektet.
- Anvend derefter ' getElementById() ”-metoden for at få det tilføjede tomme afsnit ved hjælp af dets id 'para' og vise det aktuelle browservindues indre højde i det.
Produktion
Som vist i ovenstående output, viser det aktuelle browservindue viewport-højden (indre højde), dvs. 599 px ” ved knapklik.
Eksempel 2: Anvendelse af det kombinerede vindue 'innerHeight' og 'innerWidth' egenskaber
Egenskaben 'innerHeight' kan implementeres sammen med de andre dimensionsegenskaber, såsom 'innerWidth', 'outerWidth', 'outerHeight' osv. I dette scenarie bruges den sammen med ' indre Bredde ” ejendom.
HTML kode
Lad os få et overblik over den ændrede HTML-kode:
< h2 > Vinduets indre Højde og indre Bredde egenskaber h2 >< knap onclick = 'jsFunc()' > Få højde og bredde knap >
< s id = 'til' > s >
Her ændres indholdet af '