Есть идеи, почему позиция 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 возвращает правильный curleft & curtop для обоих document.getElementById ('a') и a2, однако, если я создаю DIV динамически от расширения и добавить его к span, findPos возвращает 0,0 на новый элемент.

Есть идеи, почему?

Я добавляю div и запускаю код findPos из контекста боковой панели Firefox следующим образом:

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

'дисплей: блок; позиция: абсолютная; высота: 50 пикселей; ширина: 50 пикселей; граница: 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

Итак, я обнаружил проблему, когда писал дополнительные подробности, надеюсь, это поможет кому-то, когда он пытается выяснить, почему элемент имеет 0,0 координаты при добавлении в dom из расширения Firefox (на боковой панели илипанель инструментов).

Проблема заключается в этой безобидной строке кода:

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

Мы создаем mydiv в документе браузера Chrome.Мы можем добавить его к элементу внутри gBrowser, и он появляется визуально, однако мы находим, что опса дает нам 0,0.

Однако, если мы изменим его на:

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

Мы получимправильные значения для findpos.

Answer 2

Здесь только предположение, но element.getOffsetParent вернет значение null (а также getOffsetLeft / Right, возвращающее 0, я думаю), если стиль отображения элемента установлен в «none».

Вы можете проверить вычисленный стиль, используя:

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