Înălțimea și lățimea sunt cele mai considerabile dimensiuni în timpul proiectării aspectului unei pagini web.
„Înălțimea” indică măsurarea lungimii unui obiect de sus în jos, în timp ce „lățimea” indică cât de lat este un obiect de la o parte la alta. Acești factori ajută la ajustarea alocării unui obiect în fereastră. În JavaScript, „ înălţime ' și ' lăţime „Proprietățile ” sunt clasificate în continuare în două categorii „interioare”, adică „înălțime interioară/lățime interioară”, și „exterior”, adică „înălțime exterioară/lățime exterioară”, respectiv.
Acest articol detaliază obiectivul și funcționarea proprietății Window „innerHeight” în JavaScript.
Ce face proprietatea ferestrei „innerHeight” în JavaScript?
„ innerHeight ” este asociată cu obiectul „fereastră” care preia înălțimea ferestrei de vizualizare a ferestrei browserului, excluzând bara de locație, bara de instrumente, bara de meniu și altele. De asemenea, include înălțimea barei de defilare orizontale dacă este inclusă. Valoarea returnată a acestei proprietăți este preluată din fereastra „port de vizualizare aspect”, adică o zonă care afișează conținutul paginii web.
Sintaxa de bază
window.innerHeight SAU innerHeight
Conform sintaxei de mai sus, „ innerHeight ”proprietatea poate fi aplicată cu ușurință direct sau folosind obiectul „fereastră”.
Să implementăm proprietatea definită mai sus practic cu ajutorul sintaxei sale de bază.
Exemplul 1: aplicarea proprietății „innerHeight” a ferestrei pentru a returna înălțimea ferestrei de vizualizare a ferestrei browser
Acest exemplu utilizează proprietatea „innerHeight” cu obiectul „window” pentru a prelua înălțimea ferestrei de vizualizare a ferestrei browserului.
Cod HTML
Mai întâi, aruncați o privire la codul de mai jos:
< h2 > Proprietatea ferestrei innerHeight h2 >< buton onclick = „jsFunc()” > Obțineți înălțime buton >
< p id = 'pentru' > p >
În liniile de cod de mai sus:
- „ ” eticheta definește subtitlul de nivel 2.
- „
Eticheta ” reprezintă butonul care are un eveniment „onclick” pentru a invoca funcția „jsFunc()” atunci când evenimentul este declanșat. - „ ” eticheta adaugă un paragraf gol cu un id alocat „para” pentru a afișa valoarea returnată a proprietății „innerHeight” aplicate.
Cod JavaScript
Acum, procedați cu codul de mai jos:
< scenariu >funcţie jsFunc ( ) {
lăsa h = window.innerHeight;
document.getElementById ( 'pentru' ) .innerHTML = „Înălțimea interioară a ferestrei:” + h;
}
scenariu >
În rândurile de cod de mai sus:
- În primul rând, definiți o funcție numită „ jsFunc() ”.
- În definiția sa, variabila „h” aplică „ innerHeight ” folosind obiectul „fereastră”.
- După aceea, aplicați „ getElementById() ” pentru a obține paragraful gol adăugat folosind id-ul său „para” și pentru a afișa înălțimea interioară a ferestrei curente a browserului în el.
Ieșire
După cum se arată în rezultatul de mai sus, fereastra curentă a browserului afișează înălțimea ferestrei de vizualizare (înălțimea interioară), adică „ 599px ” la clic pe buton.
Exemplul 2: aplicarea proprietăților „innerHeight” și „innerWidth” ferestrei combinate
Proprietatea „innerHeight” poate fi implementată alături de alte proprietăți de dimensiuni, cum ar fi „innerWidth”, „outerWidth”, „outerHeight” etc. În acest scenariu, este utilizată alături de „ innerWidth ” proprietate.
Cod HTML
Să avem o prezentare generală a codului HTML modificat:
< h2 > Proprietățile ferestrei innerHeight și innerWidth h2 >< buton onclick = „jsFunc()” > Obțineți înălțime și lățime buton >
< p id = 'pentru' > p >
Aici, conținutul elementelor „