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

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.