Get the bounding box of a div element: jQuery implementation method

Question

I want to calculate the bounding box of a div element via jQuery/JavaScript.

I tried the following code:

//The left side of the box
document.getElementById("myElement").offsetLeft;
//Top of the box
document.getElementById("myElement").offsetTop;
//right side of the box
document.getElementById("myElement").offsetLeft document.getElementById("myElement").offsetWidth;
//bottom of the box
document.getElementById("myElement").offsetTop document.getElementById("myElement").offsetHeight;

It returns some value. Is this the correct way to get the bounding box of a div element via jQuery/JavaScript.

I need something similar to the getBBox() method in the SVG element. It will return the x, y, width, and height of the element. Likewise, how do I get the bounding box of a div element?

Answer 1

Since this is specifically marked for jQuery -

$("#myElement")[0].getBoundingClientRect();

or

$("#myElement").get(0).getBoundingClientRect();

(The two are functionally the same, in some older browsers, .get() is slightly faster)

Please note that if you try to get the value via a jQuery call, it will not take into account any css transform values, which may lead to unexpected results...

Note 2: In jQuery 3.0, it has been changed to use the appropriate getBoundingClientRect() call to make its own size calls (see jQuery Core 3.0 Upgrade Guide) - This means that the other jQuery answers will eventually always be correct - but only when using new jQuery versions - which is why it's called a breaking change...

Answer 2

You can get the bounding box of any element by calling the getBoundingClientRect method.

var rect = document.getElementById("myElement").getBoundingClientRect();

This will return an object with left, top, width and height fields.