Div定位被计算得很好，但需要解释它是如何工作的 [英] Div Positioning is calculated fine but need explanation how it is working

问题描述

有人可以解释这是如何工作。我创建侧面广告和放置面板我想要的宽度的位置。当我在我的服务器上上传脚本时，我得到一个小脚本，我们放在发布商网站上，我们的脚本在iframe内部运行。这是屏幕截图。

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

这是我使用的代码。

  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 [一世]）; 
 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 +\\\\
 
} 
} 
 console.log（Values + x：+ _divPos）; 
 return _divPos; 
} 
  

这是我得到的值。

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

  TOP Pos：185Left Pos：197 
  

顶部：185和左197这是正确的，但为什么我第一次获得Top 2和Left 0第二次获得正确的值。因为我得到的值在第二次尝试，所以我已经固定这使用i == 1

  if（i == 1 ）{
 left = xPosition; 
 top = yPosition; 
} 
  

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

任何人向我解释这个问题？感谢

解决方案

我愿意打赌，因为你正在寻找的元素（顺便说一下，getElementsByClassName是一个事物）相对定位到包含它的元素，因此具有位置0,2或what-ev。

getPosition函数抓取父树，因此父节点会向右移动，因为它相对于文档。

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

Can someone explain how this is working. I am creating sidepanel ad and to place the panels i want the position of the width. When i upload the script on my server then i get a small script which we place on the publisher website and where our script runs inside the iframe. Here is the screen shot.

My script is highlighted in yellow which is getting the position of the div which is in red box class='content'.

Here is the code i have used.

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
            };
        }

This is how i am calling the getPosition method

 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;
        }

This is the values i am getting .

I got the correct values in the second attempt ,i.e,

 TOP Pos: 185Left Pos: 197

Top:185 and Left 197 which is correct but why i got Top 2 and Left 0 for the first time and second time i got correct values. Since i am getting the values in the second attempt so i have fixed this using i==1

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

i dont think this is the best approach but thats how i am getting the correct values. can anyone explain me this why it is working fine on the second attempt. Thanks in advance

Anyone explain me this ? Thanks

解决方案

I'm willing to bet that it's because the element you're searching for (by the way, getElementsByClassName is a thing) is relatively positioned to the element containing it and thus has position 0,2 or what-ev.

That getPosition function crawls up the parent tree, so the parent node spits out the right position because it's relative to the document.

Finally, the document itself is relative to itself and thus has zero offset.

这篇关于Div定位被计算得很好，但需要解释它是如何工作的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！