javascript - 如何测量使用 CSS3 变换缩放的 HTML 元素的高度？

Question

首先，您需要了解上下文。

浏览器: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元素的有效高度为101px。如果您尝试通过以下任何一种方法在 Javascript 中获取高度(假设已加载 jQuery 1.4.2):

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

你得到相同的答案:480px。

如果您使用 Chrome 的开发者工具将鼠标悬停在该元素上，它会显示尺寸:136x101。 (实际上，第一个数字，即宽度，会随着窗口的宽度而变化，但这与我的问题无关。)我不知道 Chrome 是如何做到这一点的，但我确实很想知道。

有谁知道缩放后获取元素高度的方法，还是必须以某种方式计算它？

Answer 1

这实际上是一个非常有趣的问题，这是我能够想出的:

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

可能有更直接的方法来获取真实高度。