检索css3缩放元素的宽度/高度

Question

我正在反对offsetWidth属性的奇怪（我认为）。
这是场景：

我已经得到了一个span标签，在我的js中，在某一点上我执行css3转换到这个元素，如：

        el.set('styles', {
            'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */
            '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */
            '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */
            '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */
            '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */ 
        }); 
        w = el.getWidth();
        console.log('after scaling: ' + w);

此时日志返回模糊值，就像它不知道该说什么。
有什么建议吗？

Answer 1

getBoundingClientRect()为我返回正确的值。

jsFiddle 。

Answer 2

转换不会影响内在的CSS属性，因此您可以看到正确的行为。 你需要查看当前转换矩阵 - 从getComputedStyle（）。webkitTransform返回，以便弄清楚有多大的东西被缩放。

更新：在Firefox 12及更高版本和Chrome / Safari中 - 正如Alex在下面所述，您可以使用getBoundingClientRect（）来考虑应用于元素的任何变换

规模转换从50％/ 50％开始，因为这是默认和正确的行为。 如果你想让它从原点开始，那么你需要设置transform-origin：0％0％;

Answer 3

我认为span标签有display:block ？ 转换只适用于块元素。 当我转到控制台并加载jquery（只是为了方便）并执行此操作：

$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})

什么都没发生。 但如果我这样做：

$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})

突然它变了，offsetHeight增加了。 令人失望的是，偏移高度从16变为19，而不是32（尽管视觉外观是尺寸的两倍并且可能是准确的） - 但至少它确实像宣传的那样工作。

Answer 4

getBoundingClientRect（）对我不起作用（在Chrome 49中）。

这个答案让我解决了我的问题： https ： //stackoverflow.com/a/7894886/1699320

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
getStyleProp(element, 'zoom')    //gives zoom factor to use in calculations