Le funzioni di JavaScript in una pagina Web possono ottenere e impostare le proprietà degli elementi HTML. A volte, quando una pagina è impostata per alterare il suo contenuto in modo dinamico quando l'utente interagisce con esso, è difficile stabilire in anticipo quanto spazio occuperà un particolare elemento. Includendo funzioni JavaScript da eseguire in fase di esecuzione, mentre l'utente sta visualizzando una pagina, gli sviluppatori possono stabilire le dimensioni effettive, occupate da un elemento ad esempio div, compresa l'altezza.

Altezza CSS

Funzioni JavaScript possono accedere alle proprietà di altezza di qualsiasi elemento HTML in una pagina. Questo include qualsiasi dichiarazioni di Cascading Style Sheet che coinvolgono altezza, come illustrato nell'esempio di codice riportato di seguito:

document.getElementById("mydiv").style.height;

Questo codice recupera il valore di altezza CSS per l'elemento div con il "mydiv" come relativo attributo ID. L'elemento potrebbe apparire nella pagina come segue:

< div id = "mydiv" style = "height: 100px" >
Contenuto qui
< / div >

In alternativa, è possibile impostare la dichiarazione CSS in un file CSS separato o una sezione in testa alla pagina.

Altezza client

JavaScript può restituire l'altezza di client per un elemento div, che indica l'altezza occupata dall'elemento nella pagina come appare all'utente di visualizzazione, come illustrato nel codice seguente:

document.getElementById("mydiv").clientHeight;

L'attributo "clientHeight" può essere utilizzato con qualsiasi elemento HTML, tra cui divs. Non include eventuali margini, barre di scorrimento o i bordi all'interno dell'elemento, solo il contenuto. Se un elemento div è scorrevole, con il suo contenuto non tutti visibili allo stesso tempo, l'altezza di client non indicherà l'altezza totale dell'elemento, solo l'altezza di quello che l'utente può vedere.

Offset di altezza

L'offset altezza di un elemento div è l'altezza effettiva che occupa all'interno della pagina, non compresi i margini, ma tra imbottitura e confini, come illustrato nel codice seguente:

document.getElementById("mydiv").offsetHeight;

La proprietà "offsetHeight" si applica a qualsiasi elemento HTML, non solo div. Le altezze di offset e client sono gli stessi, se l'elemento div non è accompagnata da barre di scorrimento e non dispone di un bordo su uno qualsiasi dei suoi quattro lati.

Altezza di scorrimento

L'altezza di scorrimento di un elemento consente agli sviluppatori di accedere al valore di altezza completa indipendentemente da ciò che è visibile in qualsiasi momento. Se un elemento div utilizza le barre di scorrimento per lo scorrimento verticale, l'utente non vedrà tutti i suoi contenuti in una sola volta. Nell'esempio di codice riportato di seguito viene illustrato il recupero all'altezza di un elemento div:

document.getElementById("mydiv").scrollHeight;

Questo può essere utile in casi dove è necessario conoscere l'altezza effettiva di un elemento quando viene popolato in modo dinamico il contenuto. Se l'elemento non utilizza le barre di scorrimento, l'altezza di scorrimento e altezza client sono uguali.