> Faqs > Cómo calcular las dimensiones de un elemento del DOM en Javascript

Cómo calcular las dimensiones de un elemento del DOM en Javascript

Tengo un elemento de la página que he conseguido mediante Javascript.

El objeto del DOM es este:

let elemento = document.getElementById('computable');

Ahora quiero saber Cómo calcular las dimensiones de un elemento del DOM en Javascript.

Respuestas

Para calcular las dimensiones de un elemento del DOM en JavaScript, puedes usar varias propiedades y métodos que te proporcionan diferentes medidas relativas al elemento. Dependiendo de lo que necesites puede que te vengan mejor unas u otras... Te paso las formas más comunes para que lo evalúes tú mismo:

Propiedades offsetWidth y offsetHeight

Estas propiedades te dan el ancho y el alto del elemento, incluyendo los bordes y el padding, pero no los márgenes. Son útiles en la mayoría de las ocasiones. Te dan, por decirlo así, las dimensiones totales visibles del elemento.

let elemento = document.getElementById('computable');
let ancho = elemento.offsetWidth;
let alto = elemento.offsetHeight;

Propiedades clientWidth y clientHeight

Proporcionan el ancho y el alto del área de contenido del elemento más el padding, pero sin incluir los bordes, la barra de desplazamiento o los márgenes.

let anchoContenido = elemento.clientWidth;
let altoContenido = elemento.clientHeight;

Método getBoundingClientRect()

Este método retorna un objeto DOMRect que proporciona información sobre el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport). Incluye propiedades como top, right, bottom, left, width, y height.

let rect = elemento.getBoundingClientRect();
let ancho = rect.width;
let alto = rect.height;

Propiedades scrollWidth y scrollHeight

Estas propiedades incluyen el ancho y el alto del elemento, incluyendo el contenido no visible que se puede ver a través del desplazamiento. Son mayores que clientWidth/clientHeight (si hay contenido desbordado que provoca barras de desplazamiento).

let anchoScroll = elemento.scrollWidth;
let altoScroll = elemento.scrollHeight;

Seguramente alguna de estas propiedades y métodos te será suficiente para lo que necesitas... tendrías que repasar otros mecanismos si no te valen, pero lo típico es eso.

Camila
680 29 46 6