如何测量使用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;
}

var height = $('li').height();

var height = $('li').css('height');

通过上述方法获取的高度都将是101px。这是因为li元素的高度由其内部文本内容撑开，而不是由CSS样式指定的固定高度决定。因此，在JavaScript中获取元素高度时，需要注意元素高度的实际值。

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

你会得到同样的答案：480像素。

如果使用Chrome开发者工具悬停在元素上，它会显示元素的尺寸：136x101。（实际上，第一个数字即宽度会随着窗口宽度的变化而改变，但这与我的问题无关。）我不知道Chrome是如何得出这个值的，但我真的很想知道。

有人知道如何在缩放后获取元素的高度吗？或者必须通过某种方式进行计算？

- thisgeek

Answer 1

这是一个非常有趣的问题，以下是我的答案：

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

也许有更简单的方法获取真实高度。

- methodofaction

Answer 2

我认为没有一种跨浏览器的方式（甚至是特定于某个浏览器）来做到这一点。我会做的就是

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

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

- Peter C