Obtenir des cotes précises pour un objet DOM nouvellement créé

Je crée des éléments DOM dynamiquement (plus précisément, en utilisant jQuery pour créer un DIV contenant du texte avec css "width: auto", et en utilisant une police "font-face" , dans l'événement OnLoad page), mais trouve que la largeur de la div n'est pas la taille attendue (en particulier, la largeur est erronée) immédiatement après je l'ai créé et l'ajouter à l'arborescence DOM. J'ai besoin de connaître la largeur/hauteur de l'élément car je vais faire une mise en page dynamique.Obtenir des cotes précises pour un objet DOM nouvellement créé

Pour contourner ce problème, j'utilise le code suivant après avoir créé les éléments:

SetTimeout (complete_layout, 100)

En retardant l'achèvement de ma mise en page avec ce délai supplémentaire, tout fonctionne parfaitement, avec toutes les tailles d'éléments exactement comme prévu (dans le dernier Chrome sur Ubuntu Linux)

Cependant, ce délai de temporisation klugey heurte mes sensibilités et est clairement dangereux ... Y at-il un moyen de forcer la précision calculs de dimension avec une commande spécifique? Ou, y a-t-il un événement que je peux enregistrer qui ne se déclenchera qu'une fois que tous les éléments DOM auront été correctement dimensionnés, après la création de nouveaux éléments dynamiques? (J'imaginais quelque chose comme l'événement onload IMG, qui vous permet de comprendre les dimensions appropriées d'une image une fois qu'il a été chargé)

tl; dr: Y a-t-il une garantie quant au moment où la largeur d'un nouvel objet DOM sera-t-il précis?

Merci pour votre aide!

Source

2011-01-08 drcode

Êtes-vous en train de faire une autre manipulation DOM après avoir ajouté que DIV dans les DOM? –

Non, je fais juste $ ("# foo"). append ($ ("

...

")) et avoir css qui devrait déterminer le bon dimensionnement de la DIV. Immédiatement, si je vérifie la largeur, il est faux.Mais, si je retarde 100ms avec une minuterie, il est correc t. Je ne trouve aucune information en ligne décrivant quand les dimensions d'un objet DOM nouvellement créé sont garanties. – drcode

Vous aurez plus de chance d'obtenir de bonnes réponses si vous postez une petite réduction de code qui reproduit le problème. http://jsbin.com et http://jsfiddle.net sont pratiques pour cela. Vous pouvez même résoudre le problème vous-même si vous le faites. – Hemlock

Comment essayez-vous d'obtenir la largeur? .css ("width") ou .width(),

Vous devriez utiliser .width(), car .css ("width") ne retournera rien sauf auto (si aucune largeur n'a été spécifiée dans un style)

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

Il devrait donner la largeur même après appending immédiate.

Source

2011-01-08 21:29:57

J'utilise $ ('# foo'). OuterWidth(). Après avoir fait d'autres recherches en ligne, je pense que vous avez raison: "Cela devrait donner de la largeur même après l'ajout immédiat". Cela suggère à moi que je suis probablement confronté à un bug Chrome que je vais devoir rechercher plus loin. – drcode

@drcode Je vais avoir le même problème trois ans avec Firefox, je ne pense pas que ce soit un bug de chrome. Les éléments identiques donnent des largeurs et hauteurs différentes et incorrectes immédiatement après avoir été ajoutés et stylés par jQuery. Avez-vous trouvé une solution? – user568458

Maintenant, je ne fais que précalculer les extensions de texte pour les caractères de police individuels hors ligne, puis estimer les largeurs en les calculant avec mon propre code javascript sans utiliser le DOM du tout. Rend la vie beaucoup plus facile, si vous pouvez accepter quelques pixels d'erreur (en raison de la simplification excessive des calculs de crénage de texte du navigateur.) – drcode

Vous pouvez obtenir la largeur en obtenant la largeur de l'élément auquel vous ajoutez le nouveau div. Puisque la largeur de la nouvelle div est définie sur auto, ils devraient être les mêmes.

Cela ne fonctionnera cependant pas pour la hauteur.

Source

2011-01-08 21:15:34 Gerben

Je ne suis pas sûr de comprendre ce que vous dites ... La nouvelle DIV contient du texte qui déterminera la largeur de la nouvelle DIV. C'est la largeur que j'essaie de comprendre. Je ne suis pas sûr de savoir comment la largeur de la DIV parent dans le problème, mais peut-être que ma question n'était pas assez claire :) – drcode

Si aucun style de largeur est défini à la DIV, alors il est automatiquement par défaut qui s'étend à son tour aussi loin que la largeur des parents. –

Peut-être que je me trompe ou que je manque quelque chose, mais je pensais que la largeur d'un DIV avec "width: auto" sera égale à la longueur de son _own_ contenu, pas la largeur du parent. La seule exception est si le parent a une largeur qui est plus petite que la largeur du contenu de la div (dans mon cas, le contenu est juste un seul mot et beaucoup plus petit que la largeur du parent) – drcode

Obtenir des cotes précises pour un objet DOM nouvellement créé

Répondre

Questions connexes