Ottieni altezza div con JavaScript semplice

Qualche idea su come ottenere l’altezza di un div senza usare jQuery?

Stavo cercando Stack Overflow per questa domanda e sembra che ogni risposta punta a jQuery’s .height() .

Ho provato qualcosa come myDiv.style.height , ma non ha restituito nulla, anche quando il mio div aveva la width e l’ height impostate in CSS.

 var clientHeight = document.getElementById('myDiv').clientHeight; 

o

 var offsetHeight = document.getElementById('myDiv').offsetHeight; 

clientHeight include padding.

offsetHeight include padding, scrollBar e bordi.

jsFiddle

 var element = document.getElementById('element'); alert(element.offsetHeight); 
 var myDiv = document.getElementById('myDiv'); //get #myDiv alert(myDiv.clientHeight); 

clientHeight e clientWidth sono ciò che stai cercando.

offsetHeight e offsetWidth restituiscono anche l’altezza e la larghezza ma include il bordo e la barra di scorrimento. A seconda della situazione, puoi usare l’una o l’altra.

Spero che questo ti aiuti.

Un’altra opzione è usare la funzione getBoundingClientRect. Si noti che getBoundingClientRect restituirà un rect vuoto se il display dell’elemento è ‘none’.

Esempio:

 var elem = document.getElementById("myDiv"); if(elem) { var rect = elem.getBoundingClientRect(); console.log(rect.height); } 

Le altre risposte non funzionavano per me. Ecco cosa ho trovato su w3schools , assumendo che il div abbia height e / o una width impostata.

Tutto ciò che serve è height e width per escludere il riempimento.

  var height = document.getElementById('myDiv').style.height; var width = document.getElementById('myDiv').style.width; 

Downvoters: questa risposta ha aiutato almeno 5 persone, a giudicare dai voti che ho ricevuto. Se non ti piace, dimmi perché, così posso aggiustarlo. Questo è il mio più grande cruccio domestico con downvotes; raramente mi dici perché lo sottovaluti.

 
show taille height

Jsfiddle