Jak mierzyć wysokość elementu HTML skalowanego za pomocą transformacji CSS3?

Question

Po pierwsze, musisz znać kontekst.

Przeglądarka: Chrome

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; 
} 

Efektywna wysokość elementu li to 101px. Jeśli próbujesz uzyskać wysokość w JavaScript przez któregokolwiek z następujących metod (zakładając jQuery 1.4.2 jest załadowana):

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

uzyskać tę samą odpowiedź: 480px.

Jeśli najedziesz myszką na element przy użyciu narzędzi programistycznych Chrome, wyświetli on wymiary: 136x101. (W rzeczywistości, pierwsza liczba, szerokość, zmienia się wraz z szerokością okna, ale nie jest to istotne dla mojego pytania.) Nie wiem, w jaki sposób Chrome do tego dojdzie, ale na pewno by chciałem.

Czy ktoś wie, jak uzyskać wysokość elementu po skalowaniu, czy trzeba to w jakiś sposób obliczyć?

Answer 1

To jest rzeczywiście bardzo ciekawe pytanie, to co udało mi się wymyślić:

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

Nie może być bardziej prosty sposób, aby uzyskać rzeczywistą wysokość.

Answer 2

Nie wydaje mi się, że istnieje sposób, aby to zrobić w różnych przeglądarkach (lub nawet w przeglądarce). To, co właśnie robię, to prawdopodobnie Chrome pobiera wartość bezpośrednio z jej mechanizmu renderowania.