知道为什么这个元素的 X,Y 位置是 0,0 吗？

Question

我的扩展中有以下 javascript 函数：

function findPos(obj) {

var curleft = curtop = 0;
if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
        }
}
return [curleft,curtop];

而我的简化html示例如下：

 <span id="a"></span>
 <span id="b"></span>
 <span id="c"></span>
 <span id="d"></span>

在每个 span 标签中我附加一个子元素

<div id="a2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div>
<div id="b2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div>
<div id="c2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div>
<div id="d2" style="display: block; position: absolute; height: 50px; width: 50px; border: 1px solid #abcdef; z-index: 9999998;"></div>

现在当页面是静态的（也就是说，如果我手动编辑 html 以拥有 div 子级），findPos 会为 document.getElementById('a') 和 a2 返回正确的 curleft 和 curtop，但是如果我创建div 从扩展中动态添加并将其附加到跨度，findPos 在新元素上返回 0,0。

有什么想法吗？

我添加 div 并从 firefox 侧边栏的上下文中运行 findPos 代码，如下所示：

var mydiv = document.createElement('div');
mydiv.setAttribute('style', 

'显示：块；位置：绝对；高度：50 像素；宽度：50px；边框：1px 实心#abcdef z-index：9999998;'); mydiv.id = 'a2' var myspan = gBrowser.contentDocument.getElementById('a'); myspan.appendChild(mydiv);

其中 gBrowser 定义为：

// For accessing browser window from sidebar code.
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                   .getInterface(Components.interfaces.nsIWebNavigation)
                   .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
                   .rootTreeItem
                   .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                   .getInterface(Components.interfaces.nsIDOMWindow);
var gBrowser = mainWindow.gBrowser;

我已经尝试将 findPos 代码添加到页面本身，但是同样的事情。

Answer 1

这里只是一个猜测，但如果元素显示样式设置为“无”，element.getOffsetParent 将返回 null（以及我认为 getOffsetLeft/Right 返回 0）。

您可以使用以下方法检查计算的样式：

document.defaultView.getComputedStyle(document.getElementById("a"), "").display

Answer 2

所以我在编写更多详细信息时发现了这个问题，希望这有助于某人试图弄清楚为什么一个元素在从 Firefox 扩展（在侧边栏或工具栏）。

问题在于这行无害的代码：

var mydiv = document.createElement('div');

我们正在浏览器 chrome 的文档中创建 mydiv。我们可以将它附加到 gBrowser 中的元素上，它会在视觉上显示出来，但是我们 findpos 给了我们 0,0。

但是，如果我们将其更改为：

var mydiv = gBrowser.contentDocument.createElement('div');

我们得到了 findpos 的正确值。