javascript - CSS3转换后用JS获取div大小

Question

在对其应用一个/几个 CSS3 转换后，我试图在 JavaScript 中获取元素的高度。

#transformed{
    transform:scale(.5);
}

不幸的是，JQuery 的 outerHeight 似乎并没有天真地做到这一点。

$('#after').outerHeight(); //not affected by the transformation

示例：http: //jsfiddle.net/mQ2nT/

Answer 1

您可以使用getBoundingClientRect来获取转换后的尺寸和位置。

简单地，转换你的元素，并且：

$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.

最好的是，这也会在您应用的每次转换后返回正确的位置和尺寸。

您可以自由使用CSS 提供的 、 和其他所有rotate内容skew。translategBCR 将处理它。