Obtenga la altura del div con JavaScript simple

Resuelto lwiii asked hace 11 años • 13 respuestas

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

Estaba buscando esta pregunta en Stack Overflow y parece que todas las respuestas apuntan a jQuery .height().

Intenté algo como myDiv.style.height, pero no devolvió nada, incluso cuando mi div tenía su widthconfiguración heighten CSS.

lwiii avatar Mar 25 '13 19:03 lwiii
Aceptado
var clientHeight = document.getElementById('myDiv').clientHeight;

o

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

clientHeightincluye acolchado.

offsetHeightIncluye relleno, barra de desplazamiento y bordes.

Dan avatar Mar 25 '2013 13:03 Dan

Otra opción es utilizar la función getBoundingClientRect. Tenga en cuenta que getBoundingClientRect devolverá un rect vacío si la visualización del elemento es "ninguna".

Ejemplo:

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

ACTUALIZACIÓN: Aquí está el mismo código escrito en 2020:

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}
user4617883 avatar Aug 05 '2017 00:08 user4617883