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.
Next
Previous