Estamos enfrentando un problema bastante aterrador en JavaScript que ninguno de nosotros parece ser capaz de resolver:

¿Cómo obtenemos la anchura y la altura de un elemento DOM, incluidos los elementos secundarios, el modelo de caja completa, etc. sin que el componente se muestre en la página?

Recuerda: estoy buscando sugerencias. Incluso las respuestas que no responden a la pregunta por completo (o que no se ajustan a los parámetros especificados) pueden ser, y probablemente lo serán, útiles.

Objetivo principal: estoy agregando elementos HTML a la página a través de Javascript: elementos HTML con tamaños y estilos de una base de datos. El problema es que se portan mal, generalmente mal aligmento, un elemento es más grande que otro debido al relleno / margen de lo que sea, por lo que debo verificar su tamaño real para solucionar estos problemas.

La aplicación resultante será, como BigMacAttack lo describió en los comentarios, un "mosaico muy unido de controles HTML de terceros" sería bastante acertado. Debe parecerse mucho a una aplicación de escritorio completa, y el HTML parece odiar la idea con pasión. No es que lo culpe.

De todos modos, aquí hay un código de ejemplo:

JavaScript:

function exampleElement(caption, content) {
    this.caption = caption;
    this.content = content;
    this.rootElement = document.createElement("div");
}

exampleElement.prototype.constructElement = function() {
    var otherElement = document.createElement("p");
    this.rootElement.className = "exampleElement";
    this.rootElement.textContent = this.caption; 
    otherElement.className = "exampleP";
    otherElement.textContent = this.content;
    this.rootElement.appendChild(otherElement);
    /*I need to know size of the otherElement here*/
    /*here goes code adding stuff into rootElement*/
};

window.onload = function() {
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);
};

CSS:

.exampleElement {
    padding: 5px;
    margin: 6px;
}

.exampleElement .exampleP {
    padding: 20px;
    margin: 6px;
}

Un violín

Ahora, necesitamos que nuestra página reaccione dinámicamente al tamaño de la ventana y al contenido de los componentes individuales, por eso es importante poder obtener el tamaño de un objeto incluso antes de mostrarlo. También es importante que la creación de un objeto se separe claramente en tres fases:

creación a través de nuevo

construcción del árbol DOM (constructElement)

adición al documento (directamente en el cuerpo o en otro árbol DOM)

Es importante que sepamos los tamaños de los elementos individuales durante la fase de construcción.

Hasta ahora hemos intentado medirlo a través de jQuery, los atributos de ancho y alto de DOM, pero nada de eso funciona con el objeto DOM que no se muestra directamente en la página. Otro enfoque que probé fueron varias funciones que agregaron el objeto a document.body, obteniendo ancho y alto, y luego lo eliminaron; sin embargo, dado que nuestros archivos CSS son muy específicos, esto no es confiable a menos que inserte todo el elemento raíz, que será un rendimiento terrible y un montón de memoria ya que nuestros componentes se vuelven bastante complejos.

Supongo que un enfoque de eliminar archivos .CSS completamente y definir estilos directamente a través de JS resolvería al menos parte de nuestro problema, pero tiene que haber una mejor manera.

A partir de la recompensa para obtener más ideas y sugerencias. Simplemente dispare a la gente, incluso si la respuesta no está del todo dentro de los límites de la pregunta (cómo lo haría / lo haría, etc.): el objetivo que estoy tratando de lograr es que los controles HTML generados por JS se ajusten correctamente.