javascript - 为新创建的 DOM 对象获取准确的尺寸

Question

我正在动态创建 DOM 元素(更具体地说，使用 jQuery 创建一个 DIV，其中包含一些带有 css“width:auto”的文本，并在页面 OnLoad 事件中使用“font-face”字体)但发现在创建 div 并将其添加到 DOM 树后 立即，div 的宽度不是预期的大小(具体来说，宽度是错误的)。我需要知道元素的宽度/高度，因为我将对其进行一些动态布局。

作为解决方法，我在创建元素后使用以下代码:

SetTimeout(complete_layout,100)

通过使用这个额外的超时延迟完成我的布局，一切都完美无缺，所有元素大小都完全符合预期(在 Ubuntu Linux 上的最新 Chrome 中)

但是，这个笨拙的计时器延迟冒犯了我的敏感度并且显然是不安全的......有没有办法用特定的命令强制进行精确的尺寸计算？或者，是否有一个我可以注册的事件，它只会在所有 DOM 元素的大小都正确调整后、在创建新的动态元素后才会触发？ (我正在想象类似 IMG onload 事件的事件，它允许您在加载图像后计算出图像的正确尺寸)

tl;dr:是否可以保证新创建的 DOM 对象的宽度何时准确？

感谢您的帮助!

Answer 1

你是如何尝试获得宽度的？.css("width"), 或 .width(),

你应该使用 .width()，因为 .css("width') 不会返回任何东西，除了 auto(如果在某些样式中没有指定宽度)

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

即使在立即附加后它也应该给出宽度。