Dom getBoundingClientRect（）在XUL中返回零

我的firefox扩展有问题

我有一个XUL弹出面板，其中有一个用于标记云的hbox，还有一个用于向hbox添加div的JS代码：

<hbox id="tag_base" ondblclick="alert('done')"/>

我需要得到每个添加div的维度，但是getBoundingClientRect根本不起作用。 如果我删除警报，它总是零。 有了警报，情况就不同了： 第一次调用警报时，它返回零，尽管屏幕上会显示div。 任何后续警报都会返回正确的坐标

如果我在Chromebug中设置了一个断点，则所有内容都会正确报告。 如果我不以任何方式中断执行并运行循环，则只返回零

这让我很困惑。 调用“boxObject”会产生相同的结果，而在第一次调用时“getClientRects[0]”是未定义的

如果您能提供任何可能导致此问题的提示，我们将不胜感激。

尽管我找不到任何关于这一看似基本的问题的文档，但您注意到的问题很可能是因为布局（也称为“回流”）过程在您询问坐标时尚未运行

布局/回流流程将页面的DOM与页面的任何样式结合起来，并确定元素和页面其他部分的位置和尺寸（您可以尝试阅读，尽管它不是针对web开发人员的，可能有点过时）

在对DOM进行任何更改后，此回流过程不会同步运行，否则类似于

elt.style.top = "5px";
elt.style.left = "15px";

将更新布局两次，这是低效的

另一方面，要求元素位置/尺寸（至少通过

.offsetTop

）应该强制布局返回正确的信息。这种情况不会发生在你的情况下，因为某种原因，我不知道为什么

请创建一个简单的测试用例来演示这个问题，并在bugzilla.mozilla.org（CC me-asqueella@gmail.com)

我的猜测是，这与XUL布局有关，XUL布局不如HTML健壮；您可以尝试在iframe中的HTML文档中创建云，或者至少在使用CreateElements创建当前代码创建的真实HTML元素中创建云。

注意：

---

注意，如果将getBoundingClientRect与具有display:none的元素一起使用，则它将在dom中的任何位置返回0。

确保dom已准备就绪。在我的情况下，即使在单击事件时使用

getBoundingClientRect

函数。DOM准备就绪时需要进行事件绑定。

感谢您的详细响应，我将按照您的建议向bugzilla提交一个测试用例。这可能是因为弹出窗口在首次显示之前不会进行布局，除非是菜单列表，因为弹出窗口的布局必须使列表的大小与之相适应。请在评论中查看尼尔的答案。（不确定你是否收到关于答案的评论）这是一篇旧帖子，但这正是我的问题所在。救了我一天！非常感谢。非常感谢你！我将

getBoundingClientRect

与bootstrap的model一起使用，并将它们全部设置为0。然后我再次尝试使用

show.bs.modal

，它应该可以工作。再次感谢你！8年后仍然在拯救人们。谢谢我有一个在屏幕上为元素设置动画的功能，使用这个功能，我才意识到它今天停止工作了。原来是因为几周前我在全身加了一秒钟的显示：无。

elt.style.top = "5px";
elt.style.left = "15px";