获取缩放变换元素的实际高度[重复]答案

【问题标题】：Get actual height of scaled transformed element [duplicate]获取缩放变换元素的实际高度[重复]
【发布时间】：2013-08-05 08:15:16
【问题描述】：

是否有可能得到一个已被缩放的元素的实际height

transform: scale(...);

我尝试了以下方法，但他们返回的是原始height

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

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

演示：http://jsfiddle.net/ZvzXJ/

【问题讨论】：

标签： javascript jquery transform

【解决方案1】：

过了一会儿，我找到了解决办法

你必须使用

Element.getBoundingClientRect();

像这样

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

【讨论】：

【解决方案2】：

使用下面的代码来获取缩放转换元素的实际高度。 [jsFiddle]

用户 'outerHeight' 而不是 '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>

【讨论】：

我不知道你为什么得到 4 票？它根本不起作用。
检查这个 js fiddle 代码并为我工作。
是的，我已经尝试了jQuery中所有的高度方法，它们都不起作用，所以这个答案是不正确的。
它不适合你。
我签入window os，我的浏览器是chrome Version 28.0.1500.95 m。