檢索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