CODEWITHSUNDEEP
javascriptjqueryhtml
Naveen Gamage
Naveen Gamage

Reputation: 1884

Get height and width of a element after trasforming

I'm trying to get the size of an HTML element after transforming/zooming using webkit or any other methods.

After zoomed in, the element takes more pixels that it took before transformation.

I tried .height() .width() .offsetHeight() .clientHeight() all of them just returns same values after transforming the element.

Is there a way to get actual width and height of a element after transforming?

Upvotes: 0

Views: 1176

Answers (2)

Pranav Gupta
Pranav Gupta

Reputation: 944

You can use getComputedStyle to get effective styles on your element:

var matrix = new WebKitCSSMatrix(getComputedStyle($('#el')[0]).webkitTransform)

where $('#el') is your element.

then matrix.a and matrix.d should give relevant scaling factors. After that, simply use $('#el').width()*matrix.a and $('#el').height()*matrix.d respectively

Upvotes: 1

Trident D'Gao
Trident D'Gao

Reputation: 19773

try outerHeight(), outerWidth(), outerHeight(true), outerWidth(true)

also try giving your browser a break before you measure by scheduling your code with setTimout(function() { /* do you measuring here */ }, 0);

Upvotes: 0

Related Questions