Wie misst man die Höhe eines HTML-Elements, das mit CSS3 transformiert wurde?

Question

Zunächst müssen Sie den Kontext kennen.

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

Die effektive Höhe des li-Element ist 101px. Wenn Sie versuchen, die Höhe in Javascript durch eine der folgenden Methoden zu erhalten (unter der Annahme jQuery 1.4.2 geladen ist):

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

Sie die gleiche Antwort erhalten: 480px.

Wenn Sie das Element mit den Chrome-Entwicklertools über das Element bewegen, werden die Abmessungen angezeigt: 136x101. (Tatsächlich ändert sich die erste Zahl, die Breite, mit der Breite des Fensters, aber das ist nicht meine Frage.) Ich weiß nicht, wie Chrome dazu kommt, aber ich würde es gerne tun.

Kennt jemand eine Möglichkeit, die Höhe eines Elements nach der Skalierung zu erhalten, oder müssen Sie es irgendwie berechnen?

Answer 1

Dies ist tatsächlich eine sehr interessante Frage, das ist, was ich in der Lage war, zu kommen: ein einfacher Weg

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

Es könnte sein, die wirkliche Höhe zu bekommen.

Answer 2

Ich glaube nicht, dass es eine Cross-Browser- (oder sogar eine Browser-spezifische) Möglichkeit gibt, dies zu tun. Was ich gerade tun würde, ist

Chrome erhält wahrscheinlich den Wert direkt von seiner Rendering-Engine.