CSS3 dönüşümü ile ölçeklendirilmiş bir HTML öğesinin yüksekliğini nasıl ölçersiniz?

Question

İlk olarak, içeriği bilmeniz gerekir.

Tarayıcı: 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; 
} 

li elemanının etkili yüksekliği 101px olduğunu. Aşağıdaki yöntemlerden herhangi biriyle JavaScript yüksekliği elde etmek için çalışırsanız (jQuery 1.4.2 varsayarak yüklenir):

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

Eğer aynı cevabı alıyorum: 480 piksel x.

Öğeyi Chrome Geliştirici araçlarını kullanarak yüklediyseniz, size şu boyutları gösterir: 136x101. (Aslında, ilk sayı, genişlik, pencerenin genişliğiyle değişir, ancak bu benim soruna revelvant değildir.) Chrome'un buna nasıl ulaştığını bilmiyorum ama emin olmak isterim.

Herkes ölçeklendirildikten sonra bir öğenin yüksekliğini elde etmenin bir yolunu biliyor mu, yoksa bir şekilde hesaplamak zorunda mı kalıyorsunuz?

Answer 1

Bu çok ilginç bir soru bu ben gelip başardı budur aslında:

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

gerçek yüksekliği elde etmek için daha basit yolu olabilir.

Answer 2

Bunun için çapraz tarayıcı (hatta tarayıcıya özel) bir yol olduğunu düşünmüyorum. Yapacağım şey muhtemelen değeri doğrudan oluşturma motorundan alıyor.