get TRUE x and y coordinates and height and width of an element

@jnoodyMay 11.2004

I need to find the true x and y coordinates as well as the height and width of a particular element on a page. I have tried using offsetTop, offsetLeft, offsetHeight, and offsetWidth, but that does not seem to be working for all elements. I believe this may be because I have some absolute and relative positioning, but I am not really sure what the reason is. For example, sometimes the offsetTop that is returned is 0, even if I iterate through all of the element’s parents.

Does anyone know of a more accurate way to find an elements true coordinates and its current height and width?

Thanks in advance.

to post a comment

JavaScript

5 Comments(s) _↴

@FangMay 11.2004 — #Try the following script.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Position and dimensions of element&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 &lt;!--
 function findPosX(obj)
 {
 var oFirst=obj;
 var curleft = 0;
 if (obj.offsetParent)
 {
 while (obj.offsetParent)
 {
 curleft += obj.offsetLeft
 obj = obj.offsetParent;
 }
 }
 else if (obj.x)
 curleft += obj.x;
 if(!window.opera &amp;&amp; document.all &amp;&amp; document.compatMode &amp;&amp; document.compatMode != "BackCompat" &amp;&amp; oFirst.style.position!='absolute') {
 //IE in standards mode, but not position:absolute
 curleft +=parseInt(document.body.currentStyle.marginLeft); 
 }
 return "Left: "+curleft+" ";
 }
 
 function findPosY(obj)
 {
 var oFirst=obj;
 var curtop = 0;
 if (obj.offsetParent)
 {
 while (obj.offsetParent)
 {
 curtop += obj.offsetTop
 obj = obj.offsetParent;
 }
 }
 else if (obj.y)
 curtop += obj.y;
 if(!window.opera &amp;&amp; document.all &amp;&amp; document.compatMode &amp;&amp; document.compatMode != "BackCompat" &amp;&amp; oFirst.style.position!='absolute') {
 curtop +=parseInt(document.body.currentStyle.marginTop); 
 }        <br/>
 return "Top: "+curtop+" ";
 }
 
 function ElmDimensions(obj) {
 h=parseInt(document.getElementById(obj).offsetHeight);
 w=parseInt(document.getElementById(obj).offsetWidth);
 return "height: "+h+" width:"+w;
 }
 
 //--&gt;
 //]]&gt;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 &lt;!-- 
 --&gt;
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;!-- html here --&gt;
 &lt;span id="span1" style="border:1px solid red;" onclick="alert(findPosX(this)+findPosY(this)+ElmDimensions(this.id));"&gt;hello&lt;/span&gt;
 &lt;h2 id="heading2" style="position:absolute;border:1px solid blue;margin:10px;" onclick="alert(findPosX(this)+findPosY(this)+ElmDimensions(this.id));"&gt;fang&lt;/h2&gt;
 &lt;/body&gt;
 &lt;/html&gt;

The coordinate functions are from [URL=http://www.quirksmode.org/js/findpos.html]quirksmode[/URL].

I changed them to take care of IE in "standard mode" where the body margin is ignored for relative positioned elements.

Let me know if you find any other anomalies.

@jnoodyauthorMay 11.2004 — #Thanks Fang. I will give it a try and get back to you.

@jnoodyauthorMay 13.2004 — #So I tried that code out, which is very similar to the code I was already using, and I am still having a problem. I will try to describe the problem a little bit more.

I have 2 divs that are absolutely positioned. In each div are multiple other divs, positioned relatively to their parent div. My desired functionality is that when you rollover one of the divs inside the first absolutely positioned div, the position of the second absolutely positioned div changes to the positioned of the div that you rolled over + the width of the div that you rolled over, so that the second absolutely positioned div should now be directly to the right of the div that you rolled over. I did some tests and this seems to work if the first absolutely positioned div is relatively positioned instead. As far as I know, this is not a browser specific problem.

The problem: the second absolutely positioned div (the one that is being moved) is being moved to the same position as the first absolutely positioned div. The functions above (and the ones I was using before) are returning the left and top of the first absolutely positioned div, not the div that is being rolled over, and a width of 0!

Any ideas anybody?

@KorMay 14.2004 — #offsetTop and offsetLeft return relative values to parent not absolute values. If no layer parent, there is still a parent, that is document.body. This is why some may think that is about abolute positioning, but it is not true.

In your case, to find out those relative positioned divs you shoud add [i]parentobj[/i].offsetTop to [i]childobj[/i].offsetTop

A very simplified example:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <script>
 function showP(){
 Ypar= document.getElementById('par').offsetTop;
 Yc2= document.getElementById('c2').offsetTop;
 absYc2=Ypar+Yc2;
 document.getElementById('par2').style.top = absYc2;
 }
 window.onload=showP;
 </script>
 </head>
 <body leftmargin="0" topmargin="0">
 <div id="par" style="position:absolute;left:100;top:100">parent
 <div id="c1" style="position:relative;left:0;top:40;height:20">child1</div>
 <div id="c2" style="position:relative; left:0; top:80; height:20; width:50; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;">child2</div>
 </div>
 <div id="par2" style="position:absolute; left:150; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">parent2</div>
 </body>
 </html>
 [/code]

@jnoodyauthorMay 14.2004 — #Kor,

I am recursively cascading down all of the elements parents all the way to document. The problem is that the element positioned relatively inside the the absolutely positioned element is returning 0 for offsetLeft, offsetTop, offsetHeight, offsetWidth, clientHeight, and clientWidth, thus causing its "position" to be the same as its parents (which it is not, it is the second or third div inside its parent and clearly does not have the same position) and its "dimensions" to give it an area of 0! What is more curious, is that earlier on in my script, this element did give its correct position, using the same function. But alas, not anymore. This is really messing me up.

Also in #JavaScript _↴

Javascript issue, Can anyone offer advice?can i call a java function from javascript ?Error with on load function

Success!

Help @jnoody spread the word by sharing this article on Twitter...

Tweet This

get TRUE x and y coordinates and height and width of an element

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

get TRUE x and y coordinates and height and width of an element

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴