JavaScriptで要素の高さを取得しようとしていますが、CSS3変換を適用した後にその要素の高さを取得しようとしています。CSS3変換後にJSでdivサイズを取得
#transformed{
transform:scale(.5);
}
残念ながら、JQueryのouterHeightはこれを邪魔しないようです。
$('#after').outerHeight(); //not affected by the transformation
あなたは、変換後の寸法と位置を取得するためにgetBoundingClientRectを使用することができます。
は単に、あなたの要素を変換し、そして：
$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.
最善のことは、これはまた、あなたが適用され、すべての形質転換後、適切な位置、大きさを返すということです。
あなたはrotate、skew、translateなどの他のすべてのものを自由に使用できます。 gBCRはそれを処理します。
フィドルhttp://jsfiddle.net/mQ2nT/2/ – Musa
非常に良い！それについても考えなかった。 –
@Musa：好奇心のため、マージンを含む 'getBoundingClientRect'をクエリする方法はありますか？ Chromeでフィーリングを実行してdivにマージンを適用すると、jqueryは余白を含めるために 'outerHight（true） 'を使用できますが、' getBoundingClientRect.height（） 'プロパティで無視されるようです。こちらをご覧ください：http://jsfiddle.net/mQ2nT/4/ – Nope
インスペクタでも同じ結果が得られます。 – Musa
@ Musaのコメントがあれば、おそらく運が良かったでしょう。CSS3の変換ルールを手作業で解析しないといけないのではないでしょうか。 –
+1良い質問です。本当に興味深い質問ではなく、答えに投票します。 – Nope