获取经过CSS3转换的元素的大小

Getting the size of a CSS3 transformed element

本文关键字：元素 转换 经过 CSS3 获取      更新时间：2023-09-26

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

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

所以，实际上我已经把元素做成了原来大小的30%。但是，当我查询元素的宽度/高度时，它会报告应用转换之前元素的大小。

我知道这实际上是正确的行为，元素实际上不会改变大小，但它的内容会改变。但是，我在这里问的原因是，如果我在元素上单击鼠标右键，并从弹出菜单中选择"检查元素"（我刚才在Mac上使用Safari），则元素将高亮显示，渲染大小将显示在元素附带的浏览器工具提示中。

因此，这表明浏览器"知道"渲染的大小，但我还没有找到访问这些信息的方法。有人能帮我吗？

您可以对元素使用getBoundingClientRect()方法来获取维度。它考虑了变换矩阵（所以你不需要自己做任何数学运算）。

var elementDimensions = element.getBoundingClientRect();

jsFiddle。

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

这是一个概念的证明。

这是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技巧

相关文章：