Ancho del elemento DOM antes anexado a DOM

Estoy seguro de que la respuesta es no, pero ¿es posible determinar el ancho de un elemento antes de que se anexe al DOM?

Una vez que se adjunta, sé que puedo usar offsetWidth y offsetHeight.

Gracias

El truco es mostrar el elemento (display: block) pero también ocultarlo (visibility: hidden) y establecer su posición en absoluta para que no afecte el flujo de la página.

La clase MooTools Element.Measure hace esto, como mencionó Oscar.

La funcionalidad de Mootools Element.Measure que Oscar mencionó es asombrosa. Para aquellos que usan jQuery, aquí hay un complemento rápido que logra lo mismo:

$.fn.measure = (fn)-> el = $(this).clone(false) el.css visibility: 'hidden' position: 'absolute' el.appendTo('body') result = fn.apply(el) el.remove() return result 

Puede llamarlo así, asegurándose de devolver el valor (¡gracias Sam Fen por señalarlo!):

 width = $('.my-class-name').measure( function(){ return this.width() } ) 

Lo que puedes hacer con MooTools es usar la clase Element.Measure, es decir, inyectas el elemento al DOM, pero lo mantienes oculto. Ahora puedes medir el elemento sin mostrarlo realmente.

http://mootools.net/docs/more/Element/Element.Measure

No es posible, al menos no con precisión, porque el estilo afecta a estas propiedades, y dónde se coloca determina cómo se peina y qué reglas lo afectan.

Por ejemplo, colocar una

en la página sería por defecto el ancho del cuerpo si se adjuntara como un elemento secundario, pero si lo incluyes dentro, por ejemplo, un

, entonces ves cómo eso cambia las cosas rápidamente.

Modificó el código un poco. Aquí hay una solución JS pura:

 function measure(el, fn) { var pV = el.style.visibility, pP = el.style.position; el.style.visibility = 'hidden'; el.style.position = 'absolute'; document.body.appendChild(el); var result = fn(el); el.parentNode.removeChild(el); el.style.visibility = pV; el.style.position = pP; return result; } var div = document.createElement('div'); div.innerHTML = "

Hello


"; alert(div.offsetHeight); // 0 alert(measure(div, function(el){return el.offsetHeight})); // 68