CSS3 변환으로 스케일 된 HTML 요소의 높이를 어떻게 측정합니까?

Question

먼저, 컨텍스트를 알아야합니다.

브라우저 : 크롬

HTML :

<ul> 
    <li> 
     <div>Hi!</div> 
    </li> 
</ul> 

CSS :

li { 
    -webkit-transform: scale(0.21); 
    -webkit-transform-origin-x: 0%; 
    -webkit-transform-origin-y: 0%; 
} 

div { 
    height: 480px; 
    width: 640px; 
} 

리 요소의 유효 높이가 101px입니다. 다음과 같은 방법을 통해 자바 스크립트의 높이를 취득하려고하면 (jQuery를 1.4.2을 가정하는로드) :

$("li")[0].clientHeight; 
$("li")[0].scrollHeight; 
$("li").height(); 
$("li").innerHeight(); 

당신은 같은 대답을 얻을 수 : 480 픽셀.

Chrome 개발자 도구를 사용하여 요소를 마우스 오버하면 크기가 136x101로 표시됩니다. (실제로 첫 번째 숫자와 너비는 윈도우의 너비에 따라 변하지 만 내 질문에는별로 중요하지 않습니다.) Chrome이 어떻게 도착하는지 모르지만 확실히하고 싶습니다.

크기를 조정 한 후에 요소의 높이를 얻는 방법을 아는 사람이 있습니까? 아니면 어떻게 든 계산해야합니까?

Answer 1

이것은 매우 흥미로운 질문이 내가 올 수 있었던 것입니다, 실제로 :

이

node = document.getElementById("yourid"); 
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform); 
var realHeight = $("li").height() * curTransfrom.d; 

실제 높이를 얻을 수있는 더 간단한 방법이있을 수 있습니다.

Answer 2

이렇게하려면 브라우저 간 (또는 브라우저별로) 방법이 없다고 생각합니다. 내가하는 일은

var realHeight = $("li").height() * 0.21; 

크롬은 렌더링 엔진에서 직접 값을 가져옵니다.