55

I want to calculate bounding box for div element via jQuery/JavaScript.

I tried like this:

//Left side of box 
document.getElementById("myElement").offsetLeft; 
//Top side of box 
document.getElementById("myElement").offsetTop;  
//Right side of box
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth; 
//Bottom side of box 
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight; 

It returns some values. whether it is correct way to get bounding box for div element via jQuery / JavaScript.

I need something like getBBox() method in SVG element. it will return x, y, width and height of an element. Sameway how can I get bounding box for div element?

3 Answers 3

129

As this is specifically tagged for jQuery -

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

or

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

(These are functionally identical, in some older browsers .get() was slightly faster)

Note that if you try to get the values via jQuery calls then it will not take into account any css transform values, which can give unexpected results...

Note 2: In jQuery 3.0 it has changed to using the proper getBoundingClientRect() calls for its own dimension calls (see the jQuery Core 3.0 Upgrade Guide) - which means that the other jQuery answers will finally always be correct - but only when using the new jQuery version - hence why it's called a breaking change...

73

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

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

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

1
  • 14
    Be aware that getBoundingClientRect will return coordinates relative to the viewport, and not the document or parent. Mar 13, 2015 at 5:49
19

using jQuery:

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]
4
  • yes thanks i knew this concept. am asking about whether it is correct way to get bounding box of an element ?
    – SivaRajini
    Sep 13, 2013 at 7:04
  • 3
    I suggest using outerWidth() instead of just width(). So that, it will consider the padding value if any.
    – Mr_Green
    Sep 13, 2013 at 7:16
  • 3
    This doesn't take into account css transform - so doesn't give the correct answers if that's used. It could also be optmised by caching the offset() result.
    – Rycochet
    Sep 15, 2015 at 9:24
  • what if the element has absolute position? Jan 10, 2017 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.