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％开始，因为这是默认＆amp;正确的行为。如果您希望它从原点开始，则需要设置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

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

4 个答案: