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;

可能有一种更简单的方法来获得真正的身高。

Answer 2

我认为没有跨浏览器（甚至是浏览器特定的）方法来实现这一点。我刚刚做的是

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

Chrome可能直接从其渲染引擎中获取值。

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

2 个答案: