获得CSS3转换元素的大小

Question

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

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

所以,实际上我已经将元素的原始尺寸缩小了30%.但是,当我查询元素的宽度/高度时,它会在应用变换之前报告元素的大小.

我知道这实际上是正确的行为,并且该元素实际上并没有改变大小,但其内容确实如此.但是,我在这里问的原因是,如果我右键单击元素并从弹出菜单中选择"inspect element"(我刚才在Mac上使用Safari),元素会突出显示渲染的大小显示在附加到元素的浏览器工具提示中.

所以,这表明浏览器"知道"渲染的大小,但我还没有找到一种方法来访问这些信息.谁能帮我？

Answer 1

您可以getBoundingClientRect()在元素上使用该方法来获取尺寸.它考虑了变换矩阵(所以你不需要自己做任何数学运算).

var elementDimensions = element.getBoundingClientRect();

jsFiddle.

Answer 2

哇,这比我想象的要复杂.我和你一样惊讶,没有一个简单的方法.

这是一个概念证明.

这是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()令人讨厌地将矩阵作为String返回的函数,在它有用之前必须将其解析为数组.但是它包含渲染的变换比率,可以乘以CSS尺寸以获得渲染的大小.

参考:CSS技巧