Estoy seguro de que la respuesta es no, pero ¿es posible determinar el ancho de un elemento antes de que se agrega al DOM?Ancho de elemento DOM antes Anexado a DOM
Una vez que se adjunta, sé que puedo usar offsetWidth y offsetHeight.
Gracias
El truco es para mostrar el elemento (display: block), sino también ocultarla (visibilidad: oculto) y para fijar su posición absoluta a fin de que no afecta al flujo de la página.
La clase MooTools Element.Measure hace esto, como mencionó Oscar.
No es posible, por lo menos no con precisión, porque el estilo afecta a estas propiedades, y donde se trata de poner determina la forma en que se labra y qué reglas lo afectan.
Por ejemplo, colocar un <p></p> en la página sería de forma predeterminada el ancho del cuerpo si se adjuntara como elemento secundario, pero si lo incluyó dentro, por ejemplo, <div style="width: 100px;"></div>, verá cómo eso cambia las cosas rápidamente.
Lo que puedes hacer con MooTools es utilizar la clase Element.Measure, es decir, inyectas el elemento al DOM, pero lo mantienes oculto. Ahora puedes medir el elemento sin mostrarlo realmente.
+1 Agradable, otra gema agradable de MooTools. Gracias. – Steve
La funcionalidad Mootools Element.Measure que Oscar mencionó es increíble. Para aquellos que utilizan jQuery, aquí es un plugin rápida que consigue el mismo efecto: (gracias Sam Fen por señalarlo)
$.fn.measure = (fn)->
el = $(this).clone(false)
el.css
visibility: 'hidden'
position: 'absolute'
el.appendTo('body')
result = fn.apply(el)
el.remove()
return result
se le puede llamar así, asegurándose de devolver el valor:
width = $('.my-class-name').measure(function(){ return this.width() })
Sé que esto fue publicado hace mucho tiempo, pero para cualquier persona como yo que intente aplicar esto, debe * devolver * el valor en la función que ingresa. Entonces 'width = $ ('. My-class-name ') .measure (function() {return this.width()})' –
Se ha actualizado - gracias @SamFen. :) – jpadvo
Cosas geniales. Actualmente lo usa con RequireJS - https://gist.github.com/simonsmith/5135933 –
Modificó el código un poco. Aquí es una solución pura JS:
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
+1, con adicional: el elemento no será realmente prestados hasta que se detenga la ejecución de JavaScript actual. Esto significa que puede agregar, obtener las dimensiones y eliminar nuevamente sin ninguna indicación visual de que algo sucedió. –