Bạn đo chiều cao của phần tử HTML được chia tỷ lệ bằng chuyển đổi CSS3 như thế nào?

Question

Trước tiên, bạn cần phải biết ngữ cảnh.

Trình duyệt: 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; 
} 

Chiều cao hiệu quả của phần tử li là 101px. Nếu bạn cố gắng lấy chiều cao bằng Javascript bằng bất kỳ phương pháp nào sau đây (giả sử jQuery 1.4.2 được tải):

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

bạn nhận được câu trả lời tương tự: 480px.

Nếu bạn di chuột qua phần tử bằng công cụ Nhà phát triển của Chrome, nó sẽ hiển thị cho bạn kích thước: 136x101. (Trên thực tế, số đầu tiên, chiều rộng, thay đổi với chiều rộng của cửa sổ, nhưng nó không phải là sự hiểu biết cho câu hỏi của tôi.) Tôi không biết Chrome đến thế nào, nhưng tôi chắc chắn muốn.

Có ai biết cách lấy chiều cao của một phần tử sau khi được thu nhỏ hay bạn phải tính toán bằng cách nào đó?

Answer 1

Đây thực sự là một câu hỏi rất thú vị, đây là những gì tôi đã có thể đưa ra:

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

Có thể có một cách đơn giản hơn để có được chiều cao thực sự.

Answer 2

Tôi không nghĩ rằng có một trình duyệt chéo (hoặc thậm chí là một trình duyệt cụ thể) để làm điều này. Những gì tôi chỉ làm là

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

Chrome có thể lấy giá trị trực tiếp từ công cụ hiển thị của nó.