Obtenga la altura del div con JavaScript simple
¿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 width
configuración height
en CSS.
Aceptado
var clientHeight = document.getElementById('myDiv').clientHeight;
o
var offsetHeight = document.getElementById('myDiv').offsetHeight;
clientHeight
incluye acolchado.
offsetHeight
Incluye relleno, barra de desplazamiento y bordes.
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}`);
}