代码之家 › 专栏 › 技术社区 › Ivan

知道为什么这个元素的x,y位置是0,0吗?

firefox-addon firefox javascript

Ivan · 技术社区 · 15 年前

我的扩展中有以下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>

对于每个跨度标记,我附加一个子元素

<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',

'display:block;position:absolute;height:50 px;width:50px;border:1px solid abcdef z-index:999998;'); MyDIVID=“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代码添加到页面本身,不管是什么。

2 回复 | 直到 15 年前

Amitay Dobo 15 年前

这里只是猜测一下,但是如果元素显示样式设置为“无”,element.getoffsetparent将返回空值(以及getoffsetleft/right返回0)。

可以使用以下方法检查计算样式:

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

Ivan 15 年前

所以我在写更多细节的时候发现了这个问题,希望这能帮助一些人,当他们试图弄清楚为什么一个元素从一个firefox扩展(在侧边栏或工具栏中)附加到dom时有0,0坐标。

问题在于这一无害的代码行:

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

我们正在浏览器Chrome的文档中创建myDiv。我们可以将它附加到gbrowser中的元素中,它看起来很直观,但是findpos给了我们0,0。

但是,如果我们将其更改为:

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

我们得到了正确的findpos值。