Obtener la altura del elemento div en JavaScript
En HTML, las propiedades CSS que proporcione a un elemento, ya sea mediante el uso de hojas de estilo CSS o mediante el uso de JavaScript, se establecen dentro del Modelo de objetos de documento (DOM). A través de este DOM, puede acceder fácilmente a estos valores más adelante dentro del código JavaScript. Hay varias formas de obtener los valores de las propiedades CSS dentro de JavaScript. Este artículo presentará cómo obtener la propiedad CSS height de nuestro código JavaScript.
A continuación se muestra el documento HTML que hemos creado. En el interior, tenemos una etiqueta body que contiene solo un elemento div que tiene un id de container. En la etiqueta head, hemos proporcionado algunos estilos básicos para nuestro elemento div como ancho, alto, borde, relleno, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
Producción:
Si ejecuta el documento HTML anterior, verá un rectángulo como este en la ventana de su navegador.
Ahora que tenemos todo configurado, apliquemos varias propiedades en este elemento div container para obtener su altura. El código que estaremos escribiendo irá dentro de las etiquetas <script></script> presentes dentro de la etiqueta body.
Varias formas de obtener la altura de los elementos div en JavaScript
Primero, obtendremos la referencia del elemento container del DOM HTML usando el método getElementById(). Luego almacenaremos ese elemento dentro de la variable elemento en JavaScript.
let element = document.getElementById('container');
Ahora que tenemos el elemento div, obtengamos la altura del div usando varias propiedades usando JavaScript.
1. clientHeight
El clientHeight devuelve la altura de un elemento que incluye el relleno como un valor entero.
console.log(element.clientHeight);
Producción :
58
Como hemos agregado un relleno de 4px a los cuatro lados del contenedor mientras calculamos la altura, que actualmente es de 50px, el relleno de 4px arriba y 4px abajo, es decir, el relleno total de 8px será añadirse a la altura. Esto dará como resultado una altura total de 58px.
2. offsetHeight
El offsetHeight consiste en la altura del elemento que también incluye cualquier relleno, bordes y barra de desplazamiento horizontal (si está presente).
console.log(element.offsetHeight);
Producción :
60
Similar a la propiedad clientHeight, la propiedad offsetHeight también tomará un relleno de 8px, la altura del contenido es de 50px y también el ancho del borde que es de 1px superior y 1px inferior que es un total de 2px . Por lo tanto, la altura total devuelta por esta propiedad será 8 + 50 + 2, es decir, 60px.
3. scrollHeight
El scrollHeight devuelve la altura del contenido, incluido el contenido que no es visible en la pantalla debido al desbordamiento. Solo incluye el relleno del elemento, pero no el borde, el margen ni la barra de desplazamiento horizontal.
El scrollHeight es similar al clientHeight. La única diferencia entre clientHeight y scrollHeight es que el scrollheight también puede incluir la altura del contenido, que actualmente no es visible en la pantalla debido al desbordamiento.
console.log(element.scrollHeight);
Producción :
58
La altura del contenido es de 50px y el relleno total es de 8px. Por lo tanto, la altura total devuelta por la propiedad scrollHeight es 58px.
4. getBoundingClientRect()
El método getBoundingClientRect() devuelve un objeto que contiene información relacionada con el ancho y alto del elemento, así como su posición (x, y, arriba, izquierda, etc.) en relación con la ventana gráfica. La altura calculada por este método también contiene relleno y bordes.
console.log(element.getBoundingClientRect().height);
Producción :
60
Entonces, para obtener la altura del elemento del objeto devuelto por el método getBoundingClientRect(), tenemos que usar la tecla height para obtener la altura. Aquí, la altura del elemento es 50px, el relleno es 8px y el ancho del borde es 2px. Por lo tanto, esta función devolverá una altura total de 60px.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn