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.
Thanks,
Siva
This question is related to
javascript
jquery
html
css
svg
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...
using JQuery:
myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top, myelement.width(), myelement.height()]
Source: Stackoverflow.com