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

【问题标题】：Retrieve width/height of a css3 scaled element检索 css3 缩放元素的宽度/高度
【发布时间】：2016-05-15 12:55:15
【问题描述】：

我正在与 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);

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

【问题讨论】：

模糊值？请您再解释一下。
@Blowski，当然是 m8，只要我将上面的代码放在一个迭代 100 次的循环中，每次代码命中 console.log 我都会得到相同的值（即 setence 'lorem ipsum sit dolor' scaled of 10，总是返回它的初始值：272px，所以，根据日志，即使屏幕上的短语变得huge，缩放根本不会影响大小)
@holographix 你能发布你正在使用的getWidth() 函数吗？您正在查看哪些浏览器？
@Blowski 我已经使用了 offsetWidth、getWidth() 和 window.computedStyle(el) 函数（都是一样的）并且我已经在 Moz、Safari 和 Chrome 中测试了它（使用结果相同）。通过使用萤火虫检查元素，它告诉我元素大小本身根本没有改变
还有更多我想知道缩放转换从元素的中心开始，而不是从 {0,0} 坐标开始......：-/

标签： javascript html css mootools

【解决方案1】：

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

jsFiddle.

【讨论】：

这在 Chrome 中对我有用，但从 the spec 看来它似乎不应该：“注意：转换确实会影响画布上的视觉布局，但对 CSS 布局没有影响这也意味着转换不会影响 [CSSOM-VIEW] 中指定的元素接口扩展 getClientRects() 和 getBoundingClientRect() 的结果。"
@JakeCobb 这很奇怪，似乎没有供应商听过该规范:)
相反，他们决定更改规范以使其适合：D
其实“对我来说”并不是一个很准确的答案。您甚至没有提及您的浏览器，也没有提及其他浏览器的行为。
我在 2018 年 8 月的 macOS 上的最新 Firefox、Chrome 和 Safari 中测试为阳性

【解决方案2】：

变换不会影响固有的 CSS 属性，因此您会看到正确的行为。您需要查看从 getComputedStyle().webkitTransform 返回的当前转换矩阵，以了解缩放的大小。

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

比例转换从 50%/50% 开始，因为这是默认且正确的行为。如果要从原点开始，则需要设置transform-origin: 0% 0%;

【讨论】：

我已经尝试过 window.getComputedStyle(el).getWidth() 但它仍然给了我相同的结果，你认为我应该检索另一个参数吗？
好的，我已经提取了转换矩阵，但唯一告诉我的是，这是我已经知道的：matrix(1.18577, 0, 0, 1.18577, 0px, 0px) 这个数据对我来说没用，因为我已经知道我的比例应用于元素；我宁愿需要缩放对象的新大小
如果您只需要知道坐标（offsetLeft，offsetTop），将变换原点设置为左上角（0% 0%）效果很好

【解决方案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（尽管视觉外观是尺寸的两倍，也许它是准确的）——但至少它看起来确实像宣传的那样工作。

【讨论】：

是的，webkit 中的内联显示元素不支持转换 - 尽管规范明确指出应该支持。
这很酷，'虽然我前几天刚读到转换应该如何只影响块元素：P 似乎至少是最近的变化。无论哪种方式，重点仍然存在：转换确实会影响 HTMLElement 属性，明确地是 offsetHeight 和 offsetWidth

【解决方案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

【讨论】：