javascript – 如何衡量使用CSS3转换缩放的HTML元素的高度?

首先,您需要了解上下文.

浏览器:Chrome

HTML

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的开发者工具鼠标悬停元素,它会显示尺寸:136×101. (实际上,第一个数字,宽度,随着窗口的宽度而变化,但它对我的问题并不敏感.)我不知道Chrome是如何实现的,但我确实愿意.

有没有人知道在缩放后获得元素高度的方法,或者你必须以某种方式计算它?

最佳答案
这实际上是一个非常有趣的问题,这是我能够提出的:

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

可能有一种更直接的方式来获得真正的高度.

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小