Ermitteln von genauen Bemaßungen für ein neu erstelltes DOM-Objekt

Ich erstelle dynamisch DOM-Elemente (genauer gesagt mit jQuery, um ein DIV zu erstellen, das Text mit css "width: auto" enthält, und eine Schriftart "font-face") , in der Seite OnLoad Ereignis), aber finde, dass die Breite des div ist nicht die erwartete Größe (speziell ist die Breite falsch) sofort nachdem ich es erstellen und fügen Sie es in den DOM-Baum. Ich muss die Breite/Höhe des Elements kennen, weil ich ein dynamisches Layout darauf machen werde.Ermitteln von genauen Bemaßungen für ein neu erstelltes DOM-Objekt

Als Abhilfe können, verwende ich den folgenden Code nach Erstellen der Elemente:

SetTimeout (complete_layout, 100)

Durch die Fertigstellung meines Layout mit diesem zusätzlichen Timeout verzögern, alles funktioniert perfekt, mit allen Elementgrößen genau wie erwartet (In der neuesten Chrome auf Ubuntu Linux)

Allerdings klagt diese Klugey Timer Verzögerung meine Empfindlichkeiten und ist eindeutig unsicher ... Gibt es eine Möglichkeit, genaue zu erzwingen Dimensionsberechnungen mit einem bestimmten Befehl? Oder gibt es ein Ereignis, das ich registrieren kann, das nur ausgelöst wird, wenn alle DOM-Elemente korrekt dimensioniert sind, nachdem neue dynamische Elemente erstellt wurden? (Ich bin so etwas wie die IMG onload Ereignis abbildet, die Sie die richtigen Dimensionen eines Bildes, um herauszufinden erlaubt, sobald es geladen ist)

tl; dr: Gibt es eine Garantie, wann die Breite eines neu erstellte DOM-Objekt wird genau sein?

Danke für Ihre Hilfe!

Quelle

2011-01-08 drcode

Sind Sie andere DOM-Manipulation zu tun, nachdem Sie dieses DIV in das DOM hinzufügen? –

Nein, ich $ gerade tun ("# foo"). anhängen ($ ("

...

")) und haben CSS, die die richtige Größe des DIV bestimmen sollte. Wenn ich sofort die Breite überprüfe, ist es falsch. Wenn ich jedoch 100ms mit einem Timer verzögere, ist es correc t. Ich kann online keine Informationen finden, die beschreiben, wenn die Dimensionen eines neu erstellten DOM-Objekts garantiert genau sind. – drcode

Sie werden mehr Glück haben, gute Antworten zu erhalten, wenn Sie eine kleine Code-Reduktion veröffentlichen, die das Problem reproduziert. http://jsbin.com und http://jsfiddle.net sind praktisch dafür. Sie können das Problem sogar selbst lösen, wenn Sie dies tun. – Hemlock

Wie versuchen Sie, die Breite zu bekommen? .css ("width") oder .width(),

Sie sollten .width() verwenden, da .css ("width") nichts zurückgibt, außer auto (wenn in einem Stil keine Breite angegeben wurde

)

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

Es sollte Breite auch nach sofortiger anfügen geben.

Quelle

2011-01-08 21:29:57

Ich benutze $ ('# foo'). OuterWidth(). Nachdem ich online mehr recherchiert habe, denke ich, dass Sie Recht haben, dass "es Breite geben sollte, sogar nach dem unmittelbaren Anhängen". Dies deutet darauf hin, dass ich mich wahrscheinlich mit einem Chrome-Bug beschäftige, den ich weiter erforschen muss. – drcode

@drcode Ich habe das gleiche Problem seit drei Jahren mit Firefox, ich glaube nicht, dass es ein Chrom Bug ist. Identische Elemente geben sofort, nachdem sie von jQuery angehängt und gestylt wurden, unterschiedliche, falsche Breiten und Höhen. Hast du irgendeine Lösung gefunden? – user568458

Jetzt habe ich nur Text-Extents für einzelne Zeichen offline vorberechnet und dann Breiten geschätzt, indem ich sie mit meinem eigenen JavaScript-Code berechne, ohne das DOM überhaupt zu benutzen. Erleichtert das Leben, wenn Sie ein paar Fehlerpixel akzeptieren (wegen der zu starken Vereinfachung der Textkerning-Berechnungen des Browsers). – drcode

Sie könnten die Breite erhalten, indem Sie die Breite des Elements erhalten, dem Sie das neue div hinzufügen. Da die Breite des neuen div auf auto eingestellt ist, sollten sie identisch sein.

Dies wird jedoch nicht für die Höhe funktionieren.

Quelle

2011-01-08 21:15:34 Gerben

Nicht sicher, ich verstehe, was Sie sagen ... Der neue DIV hat Text drin, der die Breite des neuen DIV bestimmen wird - das ist die Breite, die ich herausfinden will. Ich bin mir nicht sicher, wie die Breite des Eltern-DIV in das Problem eingeht, aber vielleicht war meine Frage nicht klar genug :) – drcode

Wenn für das DIV kein Width-Stil festgelegt ist, wird automatisch auto erweitert, was wiederum expandiert so weit wie die Elternbreite. –

Vielleicht irre ich mich oder vermisse etwas, aber ich dachte, die Breite eines DIV mit "width: auto" entspricht der Länge seines _own_ Inhalts, nicht der Breite des Elternteils. Die einzige Ausnahme ist, wenn der Elternteil eine Breite hat, die kleiner ist als die Breite des Inhalts des div (In meinem Fall ist der Inhalt nur ein einzelnes Wort und viel kleiner als die Breite des Elternteils) – drcode

Ermitteln von genauen Bemaßungen für ein neu erstelltes DOM-Objekt

Antwort

Verwandte Themen