Høyden og bredden er de mest betydelige dimensjonene når du designer oppsettet til en nettside.
'Høyden' indikerer målingen av et objekts lengde fra topp til bunn, mens 'bredde' indikerer hvor bredt et objekt er fra den ene siden til den andre siden. Disse faktorene hjelper til med å justere allokeringen av et objekt i vinduet. I JavaScript er ' høyde ' og ' bredde ' egenskaper er videre klassifisert i to kategorier 'inner', dvs. 'innerHeight/innerWidth', og 'outer' dvs. 'outerHeight/outerWidth', henholdsvis.
Denne artikkelen utdyper formålet med og funksjonen til Window 'innerHeight'-egenskapen i JavaScript.
Hva gjør vinduet «innerHeight»-egenskapen i JavaScript?
« indre Høyde '-egenskapen er assosiert med 'vindu'-objektet som henter visningsporthøyden til nettleservinduet, unntatt plasseringslinjen, verktøylinjen, menylinjen og andre. Den inkluderer også høyden på den horisontale rullelinjen hvis den er inkludert. Den returnerte verdien av denne egenskapen er hentet fra vinduet 'layout viewport', dvs. et område som viser innholdet på nettsiden.
Grunnleggende syntaks
window.innerHeight OR innerHeight
I henhold til syntaksen ovenfor, ' indre Høyde '-egenskapen kan enkelt brukes direkte eller ved å bruke 'vindu'-objektet.
La oss implementere den ovenfor definerte egenskapen praktisk talt ved hjelp av dens grunnleggende syntaks.
Eksempel 1: Bruk av vinduet 'innerHeight'-egenskapen for å returnere Viewport-høyden til nettleservinduet
Dette eksemplet bruker 'innerHeight'-egenskapen med 'window'-objektet for å hente viewport-høyden til nettleservinduet.
HTML-kode
Først, ta en titt på koden nedenfor:
< h2 > Vindu innerHøyde Eiendom h2 >< knapp ved trykk = 'jsFunc()' > Få høyde knapp >
< s id = 'til' > s >
I kodelinjene ovenfor:
- « ”-taggen definerer underoverskriften på nivå 2.
- «
”-taggen representerer knappen som har en “onclick”-hendelse for å påkalle funksjonen “jsFunc()” når hendelsen utløses. - « ”-taggen legger til et tomt avsnitt med en tilordnet id “para” for å vise den returnerte verdien til den brukte “innerHeight”-egenskapen.
JavaScript-kode
Fortsett nå med koden nedenfor:
< manus >funksjon jsFunc ( ) {
la h = vindu.innerHøyde;
document.getElementById ( 'til' ) .innerHTML = 'Vinduets indre høyde:' + h;
}
manus >
I kodelinjene ovenfor:
- Først definerer du en funksjon kalt ' jsFunc() '.
- I sin definisjon bruker 'h'-variabelen ' indre Høyde '-egenskapen ved å bruke 'vindu'-objektet.
- Etter det bruker du ' getElementById() ”-metoden for å få det tilføyde tomme avsnittet ved å bruke ID-en “para” og vise det gjeldende nettleservinduets indre høyde i det.
Produksjon
Som vist i utdataene ovenfor, viser det gjeldende nettleservinduet viewport-høyden (indre høyde), dvs. ' 599 piksler ” ved knappeklikk.
Eksempel 2: Bruk av det kombinerte vinduet 'innerHeight' og 'innerWidth' egenskaper
'innerHeight'-egenskapen kan implementeres sammen med de andre dimensjonsegenskapene som 'innerWidth', 'outerWidth', 'outerHeight' osv. I dette scenariet brukes den sammen med ' indreBredde ' eiendom.
HTML-kode
La oss få en oversikt over den endrede HTML-koden:
< h2 > Egenskaper for vindu innerHøyde og indreBredde h2 >< knapp ved trykk = 'jsFunc()' > Få høyde og bredde knapp >
< s id = 'til' > s >
Her endres innholdet i «