Obtenga altura div con JavaScript simple

¿Alguna idea sobre cómo obtener la altura de un div sin usar jQuery?

Estaba buscando Stack Overflow para esta pregunta y parece que cada respuesta apunta a jQuery .height().

Intenté algo así myDiv.style.height, pero no devolvió nada, incluso cuando mi div tenía el suyo widthy estaba heightconfigurado en CSS.

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

o

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

clientHeight Incluye acolchado.

offsetHeight incluye relleno, barra de desplazamiento y bordes.

jsFiddle

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

Otra opción es usar la función getBoundingClientRect. Tenga en cuenta que getBoundingClientRect devolverá un rect vacío si la pantalla del elemento es 'none'.

Ejemplo:

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 y clientWidth son lo que está buscando.

offsetHeight y offsetWidth también devuelven la altura y el ancho, pero incluye el borde y la barra de desplazamiento. Dependiendo de la situación, puede usar uno u otro.

Espero que esto ayude.

Las otras respuestas no estaban funcionando para mí. Esto es lo que encontré en w3schools , suponiendo que divtiene un heighty / o widthconjunto.

Todo lo que necesita es heighty widthexcluir el relleno.

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

Votantes: esta respuesta ha ayudado a al menos 5 personas, a juzgar por los votos positivos que he recibido. Si no te gusta, dime por qué para que pueda solucionarlo. Esa es mi mayor molestia con los votos negativos; rara vez me dices por qué lo rechazas.

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

Jsfiddle

Además de el.clientHeighty el.offsetHeight, cuando necesita la altura del contenido dentro del elemento (independientemente de la altura establecida en el elemento mismo) puede usar el.scrollHeight. más información

Esto puede ser útil si desea establecer la altura del elemento o la altura máxima a la altura exacta de su contenido dinámico interno. Por ejemplo:

var el = document.getElementById('myDiv')

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

tratar

myDiv.offsetHeight 

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

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

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

Aquí hay una alternativa más:

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;
        }

    }

Una opción sería

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