10

我想检索已应用 CSS3 转换的 div 的大小。

-webkit-transform: scale3d(0.3, 0.3, 1);

因此，实际上我已将元素设为其原始大小的 30%。但是，当我查询元素宽度/高度时，它会在应用转换之前报告元素的大小。

我知道这实际上是正确的行为，并且元素实际上并没有改变大小，但它的内容会改变。但是，以及我在这里询问的原因，如果我右键单击元素并从弹出菜单中选择“检查元素”（我刚刚在 Mac 上使用 Safari），则元素会突出显示并且呈现的大小显示在附加到元素的浏览器工具提示中。

所以，这表明浏览器“知道”渲染的大小，但我还没有找到访问这些信息的方法。谁能帮我？

4

2 回答 2

9

您可以使用getBoundingClientRect()元素上的方法来获取尺寸。它考虑了转换矩阵（因此您不需要自己做任何数学运算）。

var elementDimensions = element.getBoundingClientRect();

js小提琴。

于 2012-06-06T02:32:09.870 回答
7

哇，这比我预期的要棘手。我和你一样感到惊讶，没有简单的方法。

这是一个概念证明。

这是JS：

$('div').each(function() {
    var matrix = window.getComputedStyle(this).webkitTransform,
        data;
    if (matrix != 'none') {
        data = matrix.split('(')[1].split(')')[0].split(',');
    } else {
        data = [1,null,null,1];
    }
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]);
});

关键是该getComputedStyle()函数令人讨厌地将矩阵作为字符串返回，在它有用之前必须将其解析为数组。然而，它包含渲染的变换比率，可以乘以 CSS 尺寸以获得渲染大小。

参考：CSS技巧

于 2012-01-16T17:33:05.083 回答