getBoundingClientRect() is awesome

document.documentElement.getBoundingClientRect()

Syntax:

   oRect = object.getBoundingClientRect()

 

Return Value:

   Returns a TextRectangle object.Each rectangle has six integer properties(width, height, top, left, right and bottoms) that represent a coordinate of the rectangle, in pixel.

      

 

Remarks:

   This method retrieves an object that exposes the width, height, left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2(pixels) with repect to the true client.

 

Diagram: