javascript - Div 定位计算得很好，但需要解释它是如何工作的

Question

谁能解释一下这是如何工作的。我正在创建侧面板广告并放置我想要宽度位置的面板。当我在我的服务器上上传脚本时，我会得到一个小脚本，我们将其放置在发布者网站上，我们的脚本在 iframe 中运行。这是屏幕截图。

我的脚本以黄色突出显示，它正在获取红框 class='content' 中的 div 的位置。

这是我用过的代码。

function getPosition(element) {
            var xPosition = 0;
            var yPosition = 0;
            var left = 0;
            var top = 0;
            var i = 0;
            while (element) {
                xPosition = (element.offsetLeft);
                yPosition = (element.offsetTop);
                console.log("TOP Pos: "+yPosition+"Left Pos: "+xPosition);
                if (i == 1) {
                    left = xPosition;
                    top = yPosition;
               }
                element = element.offsetParent;
                i++;
            }
            return {
                x: left,
                y: top
            };
        }

这就是我调用 getPosition 方法的方式

 function ReadDivPos(selector) {
            var _divPos = "";
            var parentDoc = window;
            while (parentDoc !== parentDoc.parent) {
                parentDoc = parentDoc.parent;
            }
            parentDoc = parentDoc.document;
            var parentDiv = parentDoc.getElementsByTagName('div');
            var divs = [];
            for (var i = 0; i < parentDiv.length; i++) {
                if (parentDiv[i].className == "content") {
                    var pos = getPosition(parentDiv[i]);
                    var x = pos["x"];
                    var y = pos["y"];
                    console.log("Values+ Top: " + y + " Left: " + x);
                    var w = parentDiv[i].offsetWidth;
                    _divPos += x + "," + w + "," + y + "," + (x + w) + ","+window.screen.availWidth+"\\n";
                }
            }
            console.log("Values+ x: " + _divPos);
            return _divPos;
        }

这是我得到的值。

我在第二次尝试中得到了正确的值，即

 TOP Pos: 185Left Pos: 197

Top:185 和 Left 197 这是正确的，但为什么我第一次得到 Top 2 和 Left 0，第二次得到正确的值。因为我在第二次尝试中获得了值，所以我已经使用 i==1 修复了这个问题

if (i == 1) {
     left = xPosition;
     top = yPosition;
 }

我不认为这是最好的方法，但这就是我获得正确值的方式。任何人都可以向我解释为什么它在第二次尝试时工作正常。提前致谢

有人给我解释一下吗？谢谢

Answer 1

我敢打赌，这是因为您正在搜索的元素(顺便说一句，getElementsByClassName 是一个东西)相对于包含它的元素定位，因此位置为 0,2 或 what-ev。

那个 getPosition 函数向上爬父树，所以父节点吐出正确的位置，因为它是相对于文档的。

最后，文档本身是相对于自身的，因此偏移量为零。