Question

是否可以获取已使用

缩放的元素的实际height

transform: scale(...);

我尝试了以下内容，但他们正在返回原始height

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

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

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

Answer 1

过了一会儿，我找到了解决方案

你必须使用

Element.getBoundingClientRect();

喜欢这样

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

Answer 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>

获取缩放变换元素的实际高度

2 个答案: