首先,您需要了解上下文。
浏览器: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;
}
通过上述方法获取的高度都将是101px。这是因为li元素的高度由其内部文本内容撑开,而不是由CSS样式指定的固定高度决定。因此,在JavaScript中获取元素高度时,需要注意元素高度的实际值。
$("li")[0].clientHeight;
$("li")[0].scrollHeight;
$("li").height();
$("li").innerHeight();
你会得到同样的答案:480像素。
如果使用Chrome开发者工具悬停在元素上,它会显示元素的尺寸:136x101。(实际上,第一个数字即宽度会随着窗口宽度的变化而改变,但这与我的问题无关。)我不知道Chrome是如何得出这个值的,但我真的很想知道。
有人知道如何在缩放后获取元素的高度吗?或者必须通过某种方式进行计算?