在CSS3变换后获取div大小与JS [英] Get div size with JS after CSS3 transformation

问题描述

我想在JavaScript中获取元素的高度。  #transformed {
 transform：scale（.5）;不幸的是，JQuery的outerHeight似乎并没有这么做。
 
 > 
 
 
  $（'＃after'）。outerHeight（）; //不受转换影响
  
示例：
  http://jsfiddle.net/mQ2nT/  
解决方案
您可以使用 getBoundingClientRect 来获取尺寸和位置
 
 
 
只需转换您的元素即可：
  $（'＃after'）[0] .getBoundingClientRect（）; 
 //注意[0]，函数是DOM不是jQuery的。 
  
最好的办法是在每次应用转换后， p> 
 
 
您可以自由 rotate ， skew ， translate 和CSS提供的一切。 gBCR将处理它。
 
I am trying to get the height of an element in JavaScript after applying one/several CSS3 transformations on it.
#transformed{
    transform:scale(.5);
}
Unfortunately, JQuery's outerHeight doesn't seem to do this naively.
$('#after').outerHeight(); //not affected by the transformation
Example:
http://jsfiddle.net/mQ2nT/
解决方案
You can use getBoundingClientRect to get the dimensions and positions after the transformation.

Simply, transform your elements, and:
$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.
The best thing is that this will also return proper positions, dimensions after every transformation you apply.

You are free to rotate, skew, translate and everything else what CSS provides. gBCR will handle it.

                        
这篇关于在CSS3变换后获取div大小与JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！