Obtenha div height com JavaScript simples

Alguma idéia de como obter a altura de uma div sem usar o jQuery?

Eu estava procurando Stack Overflow para esta pergunta e parece que todas as respostas estão apontando para jQuery .height().

Eu tentei algo como myDiv.style.height, mas ele não retornou nada, mesmo quando meu div tinha widthe heightdefinido em CSS.

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

ou

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

clientHeight inclui estofamento.

offsetHeight inclui preenchimento, scrollBar e bordas.

jsFiddle

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

Outra opção é usar a função getBoundingClientRect. Observe que getBoundingClientRect retornará um ret vazio se a exibição do elemento for 'none'.

Exemplo:

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 são o que você está procurando.

offsetHeight e offsetWidth também retornam a altura e a largura, mas incluem a borda e a barra de rolagem. Dependendo da situação, você pode usar um ou outro.

Espero que isto ajude.

As outras respostas não estavam funcionando para mim. Aqui está o que eu encontrei na w3schools , supondo que divtenha um heighte / ou widthconjunto.

Tudo o que você precisa é heighte widthexclui o preenchimento.

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

Vocês que recusaram: Esta resposta ajudou pelo menos 5 pessoas, a julgar pelos votos que recebi. Se você não gostar, me diga o porquê para que eu possa consertar. Essa é a minha maior irritação com votos negativos; você raramente me diz por que votou negativamente.

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

Jsfiddle

Além de el.clientHeighte el.offsetHeight, quando você precisar da altura do conteúdo dentro do elemento (independentemente da altura definida no próprio elemento), poderá usar el.scrollHeight. mais informações

Isso pode ser útil se você desejar definir a altura ou a altura máxima do elemento para a altura exata do conteúdo dinâmico interno. Por exemplo:

var el = document.getElementById('myDiv')

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

experimentar

myDiv.offsetHeight 

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

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

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

Aqui está mais uma 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;
        }

    }

Uma opção seria

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