Aukštis ir plotis yra patys reikšmingiausi matmenys kuriant tinklalapio maketą.
'Aukštis' nurodo objekto ilgio matavimą nuo viršaus iki apačios, o 'plotis' nurodo objekto plotį iš vienos pusės į kitą. Šie veiksniai padeda koreguoti objekto paskirstymą lange. „JavaScript“ programoje „ aukščio “ ir „ plotis “ savybės toliau skirstomos į dvi kategorijas „vidinis“, t. y. „vidinis aukštis / vidinis plotis“ ir „išorinis“, t. y. atitinkamai „išorinis aukštis / išorinis plotis“.
Šiame rašte išsamiai aprašomas „Window“ nuosavybės „innerHeight“ tikslas ir veikimas „JavaScript“.
Ką „JavaScript“ veikia lango „innerHeight“ ypatybė?
„ vidinis Aukštis Ypatybė yra susieta su „lango“ objektu, kuris nuskaito naršyklės lango peržiūros srities aukštį, išskyrus vietos juostą, įrankių juostą, meniu juostą ir kt. Be to, įtrauktas horizontalios slinkties juostos aukštis, jei ji įtraukta. Grąžinta šios nuosavybės vertė paimama iš lango „išdėstymo peržiūros sritis“, t. y. srities, kurioje rodomas tinklalapio turinys.
Pagrindinė sintaksė
langas.innerHeight OR innerHeight
Pagal pirmiau pateiktą sintaksę „ vidinis Aukštis ypatybę galima lengvai pritaikyti tiesiogiai arba naudojant objektą „langas“.
Aukščiau apibrėžtą savybę įgyvendinkime praktiškai naudodami pagrindinę sintaksę.
1 pavyzdys: lango „innerHeight“ ypatybės taikymas norint grąžinti naršyklės lango peržiūros srities aukštį
Šiame pavyzdyje naudojama ypatybė „innerHeight“ su objektu „langas“, kad būtų galima gauti naršyklės lango peržiūros srities aukštį.
HTML kodas
Pirmiausia pažvelkite į toliau pateiktą kodą:
< h2 > Lango vidinio aukščio savybė h2 >< mygtuką paspaudus = 'jsFunc()' > Gaukite ūgį mygtuką >
< p id = 'dėl' > p >
Aukščiau pateiktose kodo eilutėse:
- „ “ žyma apibrėžia 2 lygio paantraštę.
- „
“ žyma reiškia mygtuką, turintį „onclick“ įvykį, kuris iškviečia funkciją „jsFunc()“, kai įvykis suaktyvinamas. - „ “ žyma prideda tuščią pastraipą su priskirtu ID „para“, kad būtų rodoma grąžinta pritaikytos „innerHeight“ nuosavybės reikšmė.
JavaScript kodas
Dabar tęskite toliau pateiktą kodą:
< scenarijus >funkcija jsFunc ( ) {
leisti h = langas.innerHeight;
document.getElementById ( 'dėl' ) .innerHTML = Lango vidinis aukštis: + h;
}
scenarijus >
Aukščiau pateiktose kodo eilutėse:
- Pirmiausia apibrėžkite funkciją pavadinimu ' jsFunc() “.
- Savo apibrėžime „h“ kintamasis taiko „ vidinis Aukštis “ nuosavybė naudojant objektą „langas“.
- Po to pritaikykite „ getElementById() “ metodą, kad gautumėte pridėtą tuščią pastraipą naudodami jos ID „para“ ir joje būtų rodomas dabartinis naršyklės lango vidinis aukštis.
Išvestis
Kaip parodyta aukščiau pateiktame išvestyje, dabartiniame naršyklės lange rodomas peržiūros srities aukštis (vidinis aukštis), t. y. 599 pikseliai “ spustelėjus mygtuką.
2 pavyzdys: Kombinuoto lango „innerHeight“ ir „innerWidth“ ypatybių taikymas
Ypatybę „innerHeight“ galima įdiegti kartu su kitomis matmenų savybėmis, tokiomis kaip „innerWidth“, „outerWidth“, „outerHeight“ ir kt. Šiame scenarijuje ji naudojama kartu su „ vidinis plotis ' nuosavybė.
HTML kodas
Apžvelkime modifikuotą HTML kodą:
< h2 > Lango vidinis aukštis ir vidinis plotis ypatybės h2 >< mygtuką paspaudus = 'jsFunc()' > Gaukite aukštį ir plotį mygtuką >
< p id = 'dėl' > p >
Čia elementų „