The while loop and some line's meaning?

JavaScript
1

the HTML code:

<ul id="ul1"> <li>1111</li> <li>2222</li> </ul> <div id="div1"></div>

the javascript code:


var oDiv=document.getElementById('div1');
oDiv.style.left=getPos(this).left+this.offsetWidth+'px';
oDiv.style.top=getPos(this).top+'px';
function getPos(obj){
var aPos={left: null, top: null};

while(obj)
{
aPos.left+=obj.offsetLeft;
aPos.top+=obj.offsetTop;
obj=obj.offsetParent;
}

return aPos;
}

what getPos function do? why it write the while loop,and what’s effection of the while loop

the above code does a tooptip function

2

The getPos function works out the left and top coordinates of the element.

Because an element can be positioned inside of other elements, the while loop starts from the element and loops through all of its parent elements, adding up the offsets of all of those parents, so that you end up with a complete value for the left offset and the top offset.

A fuller explanation can be found at http://www.quirksmode.org/js/findpos.html

3

many thanks, but when i replace

while(obj)
{
aPos.left+=obj.offsetLeft;
aPos.top+=obj.offsetTop;
obj=obj.offsetParent;
}

with

aPos.left+=obj.offsetLeft;
aPos.top+=obj.offsetTop;

the code still work. why?

4

Because in the particular test that you did, the object that you are getting the position for isn’t nested within another similarly positioned object.
In other words, your object was already relative to 0,0.

When it’s an absolutely position object relative to a differently positioned element, that is where you would see the difference.