Figuring out the geometry of an object

ClientRect interface

      readonly attribute float left;
      readonly attribute float top;
      readonly attribute float right;
      readonly attribute float bottom;
      readonly attribute float width;
      readonly attribute float height;
    

Getting ClientRect objects

      var boundingRect = myElement.getBoundingClientRect();
    
      var allRects = myElement.getClientRects();
    
An example with more than one
client rect.

    

    

What does this actually return?

Client coordinates are relative to the viewport.
Caveat: The client rect APIs return border box sizes. If you want to get just the content box, you either need to set padding and border to 0 or subtract their computed values from the values this API returns. But watch out for omitted borders as above!
Caveat: Interleaving style changes and geometry queries is terrible for performance. This is especially a problem with libraries.