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 .height().

Ho provato qualcosa del genere myDiv.style.height, ma non ha restituito nulla, anche quando il mio div aveva il suo widthe heightimpostato in CSS.

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

o

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

clientHeight include imbottitura.

offsetHeight include imbottitura, barra di scorrimento e bordi.

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Un'altra opzione è utilizzare la funzione getBoundingClientRect. Nota che getBoundingClientRect restituirà un rettangolo vuoto se la visualizzazione dell'elemento è 'none'.

Esempio:

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

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, è possibile utilizzare l'uno o l'altro.

Spero che questo ti aiuti.

Le altre risposte non funzionavano per me. Ecco cosa ho trovato su w3schools , supponendo che divabbia a heighte / o widthset.

Tutto ciò che serve è heighted widthescludere l'imbottitura.

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

Voi downvoter: questa risposta ha aiutato almeno 5 persone, a giudicare dai voti che ho ricevuto. Se non ti piace, dimmi perché posso ripararlo. Questa è la mia più grande pipì con downvotes; mi dici raramente perché lo hai votato.

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Oltre a el.clientHeighte el.offsetHeight, quando è necessaria l' altezza del contenuto all'interno dell'elemento (indipendentemente dall'altezza impostata sull'elemento stesso) è possibile utilizzare el.scrollHeight. Ulteriori informazioni

Questo può essere utile se vuoi impostare l'altezza o l'altezza massima dell'elemento all'altezza esatta del suo contenuto dinamico interno. Per esempio:

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

provare

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Ecco un'altra alternativa:

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }

Un'opzione sarebbe

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);