我的firefox扩展程序有问题
我有一个带标签云的hbox的XUL弹出式面板，以及一个用于向这个hbox添加div的JS代码：
<hbox id="tag_base" ondblclick="alert('done')"/>
JS：
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
我需要获取每个添加的div的维度，但是，getBoundingClientRect只是拒绝工作。 如果我删除警报，它总是为零。 通过警报，故事是不同的： 第一次调用警报时，它返回零，尽管屏幕上显示div。 任何后续警报都会返回正确的坐标。
如果我在Chromebug中设置断点，则会正确报告所有内容。 如果我没有以任何方式中断执行并运行循环，则只返回零。
这让我很困惑。 调用“boxObject”会产生相同的结果，而“getClientRects [0]”在第一次调用时未定义。
对于可能导致此问题的任何提示都将不胜感激。
答案 0 :(得分：21)
注意： 注意，如果你将getBoundingClientRect与一个显示为：none的元素一起使用，那么它将在dom中的任何地方返回0。
答案 1 :(得分：3)
虽然我找不到关于这个看似根本问题的任何文档，但你注意到的问题很可能是因为你问的那一刻布局（又名“回流”）过程还没有运行为坐标。
布局/重排过程使页面的DOM具有页面所具有的任何样式，并确定元素和页面其他部分的位置和尺寸（您可以尝试阅读Notes on HTML reflow，尽管它不是针对的网页开发人员可能有点过时了。
在对DOM进行任何更改后，此重排过程不会同步运行，否则代码如
elt.style.top = "5px";
elt.style.left = "15px";
会两次更新布局，效率很低。
另一方面，要求元素位置/维度（至少通过.offsetTop）应该强制布局返回正确的信息。由于某些原因，这种情况不会发生在我的情况下，我不确定原因。
请创建一个简单的测试用例来演示问题，并在bugzilla.mozilla.org（CC me - asqueella@gmail.com）中提交错误。
我的猜测是这与XUL布局有关，它不如HTML强健;您可以尝试在iframe中的HTML文档中创建云，或者至少在＆lt; description＆gt;中创建云。使用createElementNS创建您使用当前代码创建的真实HTML元素instead of xul:div。
答案 2 :(得分：1)
确保DOM已准备就绪。就我而言，即使在点击事件中使用getBoundingClientRect功能也是如此。当DOM准备就绪时，需要对事件进行绑定。