Luigi Sabbetti

Il mondo del web a 360 gradi

jQuery come calcolare altezza di un div

jQuery: Calcolare l’altezza di un DIV


di // Pubblicato il: 20 Dicembre 2018

Nel lavoro di un web designer, capita spesso di trovarsi nella situazione in cui è necessario conoscere le misure effettive degli elementi di una pagina web. Non è raro, infatti, di trovarsi costretti ad effettuare dei calcoli, basati proprio sulla dimensione esatta degli elementi del DOM. Il metodo più semplice, e accurato, per entrare in possesso di queste informazioni è quello di sfruttare un linguaggio lato client come JavaScript.

Gli elementi di una pagina web, infatti, sono mutabili e, attraverso JavaScript, possiamo venire a conoscenza del loro effettivo ingombro, anche quando un’azione esterna ne modifica le loro dimensioni. Oggi vedremo assieme come conoscere l’altezza di un div con jQuery

Come detto, questa operazione può essere effettuata anche attraverso JavaScript nativo, ma in questa guida utilizzeremo jQuery, essendo una libreria largamento utilizzata a livello globale.

Height, OuterHeight e InnerHeight: Le altezze in jQuery

In jQuery esistono ben tre metodi diversi per catturare l’altezza di un elemento. Height, OuterHeight ed InnerHeight. Ma qual è quello corretto?
La risposta è sempre la stessa…dipende. Dipende sostanzialmente da ciò di cui avete bisogno. Di seguito, dunque, vi spiegherò le differenze tra i tre metodi, in modo tale da essere autonomi nella scelta.

Con il metodo InnerHeight saremo in grado di conoscere l’altezza calcolata dell’elemento, incluso il suo padding, ma non il bordo. Per usare il metodo dovremo semplicemente selezionare l’elemento e richiamare il metodo.

$('#div').innerHeight();

Con il metodo OuterHeight riusciremo ad entrare in possesso dell’altezza di un elemento incluso il suo padding e l’eventuale bordo.

$('#div').outerHeight();

L’ultimo metodo, Height, permette di conoscere l’altezza dell’elemento andando ad escludere margini, bordi e padding.. Diciamo, dunque, che è quello più affidabile per effettuare calcoli precisi basati sull’altezza di un div. Per utilizzarlo, basta richiamare il metodo

$('#div').height();

Calcolare l’altezza di un div in JavaScript

Chiaramente jQuery è una libreria basata su JavaScript, quindi nulla ci vieta di calcolare l’altezza di un DIV attraverso codice vanilla. Farlo è molto semplice, ci basta selezionare l’id o la classe del div, a seconda dei casi tramite document.getElementById o document.getElementByClassName e ricercare la proprietà dell’oggetto denominata clientHeight.

Il codice che ne deriva è qualcosa di molto simile a questo.

document.getElementById("myDIV").clientHeight;

Conclusioni

Siamo venuti a conoscenza di ben 4 metodi per calcolare l’altezza di un DIV utilizzando JavaScript e/o jQuery. Il mio consiglio è comunque di farne buon uso e tenere sempre in considerazioni le differenze che possono occorre tra diversi browser e dispositivi. Se conosci altri metodi per calcolare l’altezza di un div utilizzando Javascript oppure jQuery, scrivi pure nei commenti.

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere conoscenze informatiche attraverso il mio sito web. Amo correre e guardare il mare.