L'altezza e la larghezza sono le dimensioni più considerevoli durante la progettazione del layout di una pagina web.
L ''altezza' indica la misura della lunghezza di un oggetto dall'alto verso il basso mentre la 'larghezza' indica quanto è largo un oggetto da un lato all'altro. Questi fattori aiutano a regolare l'allocazione di un oggetto nella finestra. In JavaScript, il ' altezza ' E ' larghezza Le proprietà ” sono ulteriormente classificate in due categorie rispettivamente “inner” ovvero “innerHeight/innerWidth” e “outer” ovvero “outerHeight/outerWidth”.
Questo articolo approfondisce l'obiettivo e il funzionamento della proprietà 'innerHeight' di Window in JavaScript.
Cosa fa la proprietà Window 'innerHeight' in JavaScript?
IL ' innerHeight ” è associata all'oggetto “finestra” che recupera l'altezza del viewport della finestra del browser escludendo la barra degli indirizzi, la barra degli strumenti, la barra dei menu e altro. Inoltre, include l'altezza della barra di scorrimento orizzontale, se inclusa. Il valore restituito di questa proprietà viene preso dalla finestra 'layout viewport', cioè un'area che mostra il contenuto della pagina web.
Sintassi di base
window.innerHeight OR innerHeight
Secondo la sintassi di cui sopra, il ' innerHeight La proprietà ” può essere facilmente applicata direttamente o utilizzando l'oggetto “finestra”.
Implementiamo praticamente la proprietà sopra definita con l'aiuto della sua sintassi di base.
Esempio 1: applicazione della proprietà 'innerHeight' della finestra per restituire l'altezza del riquadro di visualizzazione della finestra del browser
Questo esempio utilizza la proprietà 'innerHeight' con l'oggetto 'window' per recuperare l'altezza del viewport della finestra del browser.
Codice HTML
Innanzitutto, dai un'occhiata al codice indicato di seguito:
< h2 > Finestra innerHeight Proprietà h2 >< pulsante al clic = 'funzionejs()' > Ottieni altezza pulsante >
< P id = 'per' > P >
Nelle righe di codice sopra:
- IL ' Il tag ” definisce il sottotitolo di livello 2.
- IL '
Il tag ” rappresenta il pulsante con un evento “onclick” per richiamare la funzione “jsFunc()” quando l'evento viene attivato. - IL ' Il tag ” aggiunge un paragrafo vuoto con un id assegnato “para” per visualizzare il valore restituito della proprietà “innerHeight” applicata.
codice javascript
Ora, procedi con il codice indicato di seguito:
< copione >funzione jsFunc ( ) {
permettere h = window.innerHeight;
document.getElementById ( 'per' ) .innerHTML = 'InnerHeight della finestra: ' +h;
}
copione >
Nelle righe di codice precedenti:
- Innanzitutto, definisci una funzione chiamata ' jsFunc() ”.
- Nella sua definizione, la variabile “h” applica il “ innerHeight ” utilizzando l'oggetto “finestra”.
- Successivamente, applica il ' getElementById() ” per ottenere il paragrafo vuoto aggiunto utilizzando il suo id “para” e visualizzare l'altezza interna della finestra del browser corrente al suo interno.
Produzione
Come mostrato nell'output sopra, la finestra del browser corrente mostra l'altezza del viewport (altezza interna), ad esempio ' 599 pixel ” al clic del pulsante.
Esempio 2: applicazione delle proprietà combinate 'innerHeight' e 'innerWidth' della finestra
La proprietà 'innerHeight' può essere implementata insieme alle altre proprietà delle dimensioni come 'innerWidth', 'outerWidth', 'outerHeight' ecc. In questo scenario, viene utilizzata insieme a ' innerWidth ' proprietà.
Codice HTML
Diamo una panoramica del codice HTML modificato:
< h2 > Proprietà della finestra innerHeight e innerWidth h2 >< pulsante al clic = 'funzionejs()' > Ottieni altezza e larghezza pulsante >
< P id = 'per' > P >
Qui, il contenuto degli elementi '