CSS3 변환 후 JS로 div 크기 가져 오기

하나 또는 여러 개의 CSS3 변환을 적용한 후 JavaScript에서 요소의 높이를 가져 오려고합니다.CSS3 변환 후 JS로 div 크기 가져 오기

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

불행히도 JQuery의 outerHeight는 순진하게 수행하지 않습니다.

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

예 : http://jsfiddle.net/mQ2nT/

출처

2012-12-01 ipburbank

Inspector에서도 동일한 결과가 나타납니다. – Musa

@ Musa의 의견을 제시하면 CSS3 변환 규칙을 수동으로 구문 분석하기를 원하지 않는 한 운이 좋지 않을 것입니다. –

+1 좋은 질문입니다. 답에 많은 찬성표가 있지만 정말 흥미로운 질문은 아닙니다. – Nope

당신은 변환 후 크기와 위치를 얻을 수 getBoundingClientRect를 사용할 수 있습니다.

은 단순히 당신의 요소를 변환 및 :

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

가장 좋은 것은이 또한 당신이 적용되는 모든 변환 후 적절한 위치, 크기를 반환 할 것입니다.

당신은 rotate, skew, translate 및 기타 CSS가 제공하는 모든 것이 있습니다. gBCR이 처리 할 것입니다.

출처

2012-12-01 23:50:34 jolt

피들 http://jsfiddle.net/mQ2nT/2/ – Musa

아주 좋습니다! 생각조차하지 않았어. –

@Musa : 호기심 때문에, 마진을 포함하여'getBoundingClientRect'를 쿼리하는 방법이 있습니까? Chrome에서 바이올린을 실행하고 div에 여백을 적용 할 때 jquery는 여백을 포함하기 위해 'outerHight (true)'를 사용할 수 있지만 'getBoundingClientRect.height()'속성에 의해 무시되는 것처럼 보입니다. 여기를 참조하십시오 : http://jsfiddle.net/mQ2nT/4/ – Nope

CSS3 변환 후 JS로 div 크기 가져 오기

답변

관련 문제