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会返回正确的curleft＆amp; curtop for document.getElementById（'a'）＆amp; a2，但是如果我从扩展名动态创建div并将其附加到span，则findPos会在新元素上返回0,0。

任何想法为什么？

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

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

'display：block; position：absolute;身高：50像素;宽度：50px; border：1px solid #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

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

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

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

Answer 2

所以当我写下更多详细信息时，我发现了这个问题，希望当他们试图找出一个元素从firefox扩展名附加到dom时为什么元素有0,0坐标（在侧边栏或工具栏）。

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

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

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

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

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

我们为findpos获得正确的值。

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

2 个答案: