tablas - que es el dom en javascript

Ancho del elemento DOM antes de añadirse a DOM

Question

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

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

Gracias

Answer 1

El elemento Mootools. La funcionalidad de medida que Oscar mencionó es impresionante. 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 a Sam Fen por señalarlo!):

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

Answer 2

El truco consiste en mostrar el elemento (pantalla: bloque) pero también ocultarlo (visibilidad: oculto) 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 lo mencionó Oscar.

Answer 3

Lo que puede hacer con MooTools es usar la clase Element.Measure, es decir, inyectar el elemento en el DOM, pero mantenerlo oculto. Ahora, puedes medir el elemento sin mostrarlo realmente.

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

Answer 4

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 = "<p>Hello</p><br/>";

alert(div.offsetHeight); // 0

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

Answer 5

No es posible, al menos no con precisión, porque el estilo afecta a estas propiedades y el lugar donde se colocan determina su estilo y las reglas que lo afectan.

Por ejemplo, colocar un <p></p> en la página sería por defecto el ancho del cuerpo si se le anexara como un niño, pero si lo agregó dentro, por ejemplo, un <div style="width: 100px;"></div> , entonces ves cómo eso cambia las cosas rápidamente.