Korkeus ja leveys ovat merkittävimmät mitat web-sivun ulkoasua suunniteltaessa.
'Korkeus' ilmaisee kohteen pituuden mittaamisen ylhäältä alas, kun taas 'leveys' osoittaa kuinka leveä kohde on yhdeltä sivulta toiselle. Nämä tekijät auttavat säätämään kohteen kohdistamista ikkunassa. JavaScriptissä ' korkeus ' ja ' leveys '-ominaisuudet luokitellaan edelleen kahteen luokkaan 'sisäinen' eli 'sisäkorkeus/sisäleveys' ja 'ulkokorkeus' eli 'ulkokorkeus/ulkoleveys'.
Tämä kirjoitus käsittelee JavaScriptin Window 'innerHeight' -ominaisuuden tavoitetta ja toimintaa.
Mitä ikkunan 'innerHeight'-ominaisuus tekee JavaScriptissä?
' sisäkorkeus '-ominaisuus liittyy 'ikkuna'-objektiin, joka hakee selainikkunan näkymän korkeuden pois lukien sijaintipalkki, työkalupalkki, valikkopalkki ja muut. Se sisältää myös vaakasuuntaisen vierityspalkin korkeuden, jos se sisältyy. Tämän ominaisuuden palautettu arvo otetaan ikkunasta 'layout viewport' eli alue, joka näyttää verkkosivun sisällön.
Perussyntaksi
window.innerHeight TAI innerHeight
Yllä olevan syntaksin mukaan ' sisäkorkeus ” -ominaisuutta voidaan helposti soveltaa suoraan tai käyttämällä 'ikkuna'-objektia.
Toteutetaan yllä määritelty ominaisuus käytännössä sen perussyntaksin avulla.
Esimerkki 1: Ikkunan 'innerHeight'-ominaisuuden käyttäminen palauttamaan selainikkunan näkymän korkeus
Tässä esimerkissä käytetään 'innerHeight'-ominaisuutta 'window'-objektin kanssa selainikkunan näkymän korkeuden hakemiseen.
HTML-koodi
Katso ensin alla oleva koodi:
< h2 > Ikkunan sisäkorkeusominaisuus h2 >< -painiketta klikkaamalla = 'jsFunc()' > Hanki korkeutta -painiketta >
< s id = 'for' > s >
Yllä olevilla koodiriveillä:
- ' ” -tunniste määrittää tason 2 alaotsikon.
- '
' -tunniste edustaa painiketta, jossa on 'onclick'-tapahtuma, joka kutsuu funktion 'jsFunc()', kun tapahtuma käynnistetään. - ' ' -tunniste lisää tyhjän kappaleen, jossa on määritetty id 'para', joka näyttää käytetyn 'innerHeight'-ominaisuuden palautetun arvon.
JavaScript-koodi
Jatka nyt alla annetulla koodilla:
< käsikirjoitus >toiminto jsFunc ( ) {
antaa h = ikkuna.sisäkorkeus;
document.getElementById ( 'for' ) .innerHTML = 'Ikkunan sisäkorkeus:' + h;
}
käsikirjoitus >
Yllä olevilla koodiriveillä:
- Määritä ensin funktio nimeltä ' jsFunc() ”.
- Määritelmässään 'h'-muuttuja käyttää ' sisäkorkeus '-ominaisuutta käyttämällä 'ikkuna'-objektia.
- Käytä sen jälkeen ' getElementById() ” -menetelmää saadaksesi lisätyn tyhjän kappaleen käyttämällä sen id 'para' ja näyttämään nykyisen selainikkunan sisäkorkeuden siinä.
Lähtö
Kuten yllä olevassa tulosteessa näkyy, nykyinen selainikkuna näyttää näkymän korkeuden (sisäkorkeuden) eli ' 599 pikseliä ” painiketta napsauttamalla.
Esimerkki 2: Yhdistetyn ikkunan 'innerHeight' ja 'innerWidth' ominaisuuksien käyttäminen
Ominaisuus 'innerHeight' voidaan toteuttaa muiden mittaominaisuuksien, kuten 'innerWidth', 'outerWidth', 'outerHeight' jne. rinnalla. Tässä skenaariossa sitä käytetään '' sisäleveys ” omaisuutta.
HTML-koodi
Katsotaanpa yleiskatsaus muokattuun HTML-koodiin:
< h2 > Ikkunan innerHeight ja innerWidth ominaisuudet h2 >< -painiketta klikkaamalla = 'jsFunc()' > Hanki korkeus ja leveys -painiketta >
< s id = 'for' > s >
Tässä '