getBoundingClientRect() 在 XUL 中返回零答案

【问题标题】：getBoundingClientRect() is returning zero in XULgetBoundingClientRect() 在 XUL 中返回零
【发布时间】：2011-01-01 23:28:29
【问题描述】：

我的 Firefox 扩展有问题

我有一个 XUL 弹出面板，其中包含一个用于标签云的 hbox，以及一个用于将 div 添加到此 hbox 的 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]”在第一次调用时未定义。

任何可能导致此问题的提示将不胜感激。

【问题讨论】：

在评论中查看 Neil 的回答。（不确定您是否收到关于 SO 答案的 cmets 通知。）

标签： dom xul coordinates

【解决方案1】：

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

【讨论】：

旧帖子，但这正是我的问题。
拯救了我的一天！谢谢！
非常感谢！我将getBoundingClientRect 与引导程序的模态一起使用，并将它们全部设为0。然后我再次尝试使用shown.bs.modal，它应该可以工作。再次感谢您！
将近 8 年后仍然在救人。谢谢！我有一个功能可以在屏幕上为元素设置动画，它使用它，我刚刚意识到它今天停止工作。原来是因为几周前我在全身加了display: none 1秒。
谢谢！在 scrollTo 函数中使用 getBoundingClientRect。只有指向我的<a id="top"></a> 标签的“滚动到顶部”链接不起作用。设置为display: none;。将其更改为 visibility: hidden; 即可解决。

【解决方案2】：

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

布局/重排过程采用页面具有的任何样式的页面 DOM，并确定元素和页面其他部分的位置和尺寸（您可以尝试阅读 Notes on HTML reflow，尽管它不是针对 Web 开发人员的并且可能有点过时了）。

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

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

会更新布局两次，效率低。

另一方面，要求元素位置/尺寸（至少通过.offsetTop）应该强制布局返回正确的信息。由于某种原因，您的情况不会发生这种情况，我不确定为什么。

请创建一个简单的测试用例来演示问题并在 bugzilla.mozilla.org 中提交错误（抄送我 - asqueella@gmail.com）。

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

【讨论】：

感谢您的详细回复，我会按照您的建议向bugzilla提交一个测试用例。
这可能是因为弹出窗口在第一次显示之前不会发生布局，除非是在菜单列表的情况下，因为弹出窗口必须进行布局，以便列表可以调整大小。

【解决方案3】：

确保 DOM 已准备就绪。 在我的情况下，即使在点击事件上使用 getBoundingClientRect 函数也是如此。当 DOM 准备好时，需要进行事件的绑定。

【讨论】：