Get actual height of scaled transformed element

Question

Is it possible to get the actual height of a element that has been scaled with

transform: scale(...);

I have tried the following, but they are returning the original height

$('element').css('height');  // 16px (demo)

$('element').height(); // 21px (demo)

Demo: http://jsfiddle.net/ZvzXJ/

score 10 · Accepted Answer · answered Aug 05 '13 at 09:49

10

After a while, i have found the solution to this

You have to use

Element.getBoundingClientRect();

Like so

$('element')[0].getBoundingClientRect().height;

answered Aug 05 '13 at 09:49

iConnor

19,997
14
62
97

Vipul Vaghasiya · Answer 2 · 2013-08-05T09:45:44.450

-1

Use below code to Get actual height of scaled transformed element. [jsFiddle]

user 'outerHeight' instead of 'height'

http://jsfiddle.net/ZvzXJ/8/

//full code here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
.button{
    -webkit-transform: scale( 3 );
    margin:100px;
    display:block;
}
</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function($) {
    $(window).load(function(){
         alert($('.button').outerHeight()+ 'px');
         alert($('.button').css('height'));
    });   
});
</script>

</head>

<body>
<button class="button">Welcome</button>
</body>
</html>

edited Aug 05 '13 at 09:45

answered Aug 05 '13 at 09:18

Vipul Vaghasiya

481
1
5
16

I don't know why you got 4 votes for that? it doesn't work at all. – iConnor Aug 05 '13 at 09:40
check this js fiddle code and working for me. – Vipul Vaghasiya Aug 05 '13 at 09:44
Yes, i have tried all of the height methods in jQuery none of them work, so this answer is incorrect. – iConnor Aug 05 '13 at 09:46
It's not working for you. – iConnor Aug 05 '13 at 09:50
i check in window os and my browser is chrome Version 28.0.1500.95 m . – Vipul Vaghasiya Aug 05 '13 at 09:50
this code working for me ( alert two time '22px'). – Vipul Vaghasiya Aug 05 '13 at 09:51
Is the element `22px` in `height` though? – iConnor Aug 05 '13 at 09:52
Change the `scale( 10 );` and it will still be `22px` – iConnor Aug 05 '13 at 09:53

Get actual height of scaled transformed element

2 Answers2