Obtener dimensiones precisas para un objeto DOM creado recientemente

Estoy creando elementos DOM dinámicamente (más específicamente, usando jQuery para crear un DIV que contenga texto con css "width: auto", y usando una fuente "font-face" , en el evento OnLoad de la página) pero encuentra que el ancho del div no es el tamaño esperado (específicamente, el ancho es incorrecto) inmediatamente después de crearlo y agregarlo al árbol DOM. Necesito saber el ancho/alto del elemento porque haré un diseño dinámico en él.Obtener dimensiones precisas para un objeto DOM creado recientemente

Como solución, que utiliza el código siguiente después de la creación de los elementos:

SetTimeout (complete_layout, 100)

Al retrasar la finalización de mi diseño con este tiempo de espera adicional, todo funciona perfectamente, con todos los tamaños de elemento exactamente como se esperaba (en el último Chrome en Ubuntu Linux)

Sin embargo, este retraso del temporizador klugey ofende mi sensibilidad y es claramente inseguro ... ¿Hay alguna manera de forzar la precisión cálculos de dimensión con un comando específico? O bien, ¿hay algún evento que pueda registrar que se active solo una vez que todos los elementos DOM hayan sido dimensionados correctamente, después de que se creen nuevos elementos dinámicos? (Estoy imaginando algo así como el proceso de carga IMG, que le permite averiguar las dimensiones propias de una imagen una vez que se ha cargado)

tl; dr: ¿Hay una garantía en cuanto a cuando el ancho de una el objeto DOM recientemente creado será preciso

Gracias por su ayuda!

Fuente

2011-01-08 drcode

Qué haces otra manipulación DOM después de agregar que DIV en el DOM? –

No, acabo de hacer $ ("# foo"). append ($ ("

...

")) y tiene css que debería determinar el tamaño correcto del DIV. Inmediatamente, si verifico el ancho, es incorrecto. Sin embargo, si retraso 100ms con un temporizador, es correcto. t. No puedo encontrar ninguna información en línea que describa cuándo se garantiza que las dimensiones de un objeto DOM recientemente creado son precisas. – drcode

Tendrá mejor suerte para obtener buenas respuestas si publica una pequeña reducción de código que reproduce el problema. http://jsbin.com y http://jsfiddle.net son útiles para esto. Incluso puede resolver el problema usted mismo si lo hace. – Hemlock

¿Cómo está tratando de obtener el ancho? .css ("ancho"), o. Ancho(),

Debe usar .width(), como .css ("ancho") no devolverá nada excepto automático (si no se especificó el ancho en algún estilo)

$("#foo").width();

se debe dar el ancho, incluso después de anexar inmediata.

Fuente

2011-01-08 21:29:57

Estoy usando $ ('# foo'). OuterWidth(). Después de investigar un poco más en línea, creo que tienes razón en que "debería dar ancho incluso después de agregarlo inmediatamente". Esto me sugiere que probablemente estoy lidiando con un error de Chrome que tendré que investigar más. – drcode

@drcode Estoy teniendo el mismo problema desde hace tres años con Firefox, no creo que sea un error de Chrome. Los elementos idénticos otorgan anchos y alturas diferentes e incorrectos inmediatamente después de ser añadidos y diseñados por jQuery. ¿Encontraste alguna solución? – user568458

Ahora solo precalculo las extensiones de texto para los caracteres de fuentes individuales fuera de línea y luego calculo las anchuras calculándolas con mi propio código de JavaScript sin usar el DOM en absoluto. Facilita la vida, si puede aceptar unos pocos píxeles de error (debido a la simplificación excesiva de los cálculos de interletraje de texto del navegador). – drcode

Puede obtener el ancho obteniendo el ancho del elemento al que agrega el nuevo div. Como el ancho del nuevo div se establece en automático, deberían ser iguales.

Sin embargo, esto no funcionará para la altura.

Fuente

2011-01-08 21:15:34 Gerben

No estoy seguro de entender lo que dices ... El nuevo DIV tiene texto, que determinará el ancho del nuevo DIV- Este es el ancho que estoy tratando de descubrir. No estoy seguro de cómo el ancho del DIV padre se relaciona con el problema, pero tal vez mi pregunta no fue lo suficientemente clara :) – drcode

Si no se establece el estilo de ancho en el DIV, se convierte automáticamente en automático, que a su vez se expande en cuanto al ancho de los padres –

Tal vez estoy equivocado o me falta algo, pero pensé que el ancho de un DIV con "ancho: automático" será igual a la longitud de su propio contenido, no el ancho del elemento principal. La única excepción es si el padre tiene un ancho que es más pequeño que el ancho del contenido del div (en mi caso, el contenido es solo una palabra y mucho más pequeño que el ancho del padre) – drcode

Obtener dimensiones precisas para un objeto DOM creado recientemente

Respuesta

Cuestiones relacionadas