Saeed Adel Mehraban Saeed Adel Mehraban - 7 days ago 6
Javascript Question

get element dimensions regardless of rotation

Suppose we have a 50x100

div
, if we rotate it 45 degrees, jquery returns different values for width and height. If we rotate it again for 45 degrees, jquery returns 100 for width and 50 for height.

I'm looking for a way to get actual width and height regardless of rotation.

Note: actually the parent of my element has rotation, and I don't want to get involved with it's rotation. I'm not willing to use sin/cos with jquery width height to get original dimensions.

Answer

Since jQuery is an old library, it used some different combinations (of getBoundingClientRect, getComputedStyle, clientWidth/clientHeight and offsetWidth/offsetHeight (and also node.style)) over the times.

So, without knowing your used version of jQuery, it's hard to say what it does internally.

At least getBoundingClientRect gives you the actual dimensions of transformed elements.

Here's a small test case: https://jsfiddle.net/bxe1ve9q

I would bet that using clientWidth/clientHeight or offsetWidth/offsetHeight should give the correct values.

Comments