获取CSS3缩放元素的宽度/高度

Question

我在与offsetWidth属性的一个奇怪问题（我认为是这样）抗争。 这是情景：

假设我有一个标签，然后在我的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);

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

- holographix

---

模糊值？您能详细解释一下吗？ - Dan Blows

@Blowski，没问题，只要我把上面的代码放在一个循环中，迭代100次，每次代码遇到console.log时，我都会得到相同的值（即“lorem ipsum sit dolor”这个句子按比例缩放10倍，始终返回其初始值：272px，因此根据日志，缩放根本不影响大小，即使屏幕上的短语变得巨大）。 - holographix

而且我想知道为什么比例转换始于元素的中心而不是{0,0}坐标.. :-/ - holographix

不，它没有正常工作。 我是说，我找到了一个解决方法，它有点起作用，但并不是一个解决方案。 - holographix

请看此链接 https://dev59.com/1msz5IYBdhLWcg3w8MYb#30157405 - abernier

Answer 1

getBoundingClientRect() 对我来说返回了正确的值。

jsFiddle。

- alex

---

这在Chrome中对我有效，但从规范来看，它似乎不应该： “注意：变换确实会影响画布上的视觉布局，但对CSS布局本身没有影响。这也意味着变换不会影响Element Interface扩展getClientRects()和getBoundingClientRect()的结果，这些结果在[CSSOM-VIEW]中指定。” - Jake Cobb

@JakeCobb 这很奇怪，似乎没有供应商听取了那个规格 :) - alex

相反，他们决定更改规范以使其适应。 - Jodo

实际上，“对我来说”并不是一个非常精确的答案。你甚至没有提到你使用的浏览器，也没有提到其他浏览器的行为。 - Mick

我已在2018年8月的macOS上最新版本的Firefox，Chrome和Safari中进行了测试，并且结果为阳性。 - Mick

对我来说不起作用，因为图像在缩放的div内。 - Trever Thompson

Answer 2

转换不影响内在的CSS属性，所以您看到的行为是正确的。您需要查看当前变换矩阵-从getComputedStyle().webkitTransform返回，以便确定某些东西被缩放了多少。

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

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

- Michael Mullany

---

我已经尝试使用window.getComputedStyle(el).getWidth()，但仍然得到了相同的结果，你认为我应该获取其他参数吗？ - holographix

好的，我已经提取了变换矩阵，但是它告诉我的唯一事情是我已经知道的：matrix(1.18577, 0, 0, 1.18577, 0px, 0px)。这些数据对我来说毫无用处，因为我已经知道我应用于元素的比例尺；我更需要的是缩放后对象的新尺寸。 - holographix

如果您只需要知道坐标（offsetLeft，offsetTop），将 transform-origin 设置为左上角（0％0％）即可完美解决。 - aross

Answer 3

我猜span标签有"display:block"属性吧？transforms只能用于块级元素。当我打开控制台并加载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增加了。令人失望的是，offset高度从16增加到19，而不是32（尽管视觉效果是两倍大小，也许是准确的）- 但至少它似乎按照广告所说的那样工作。

- roberto tomás

---

是的，在WebKit中不支持对内联显示元素进行转换-尽管规范明确规定它们应该支持。 - Michael Mullany

很酷，不过我最近才读到转换只应影响块元素:P 至少似乎是最近的变化。无论如何，重点仍然是：转换确实会影响HTMLElement属性，特别是offsetHeight和offsetWidth。 - roberto tomás

Answer 4

在Chrome 49中，getBoundingClientRect()对我无效。

这个答案给了我另一种解决问题的方法：https://dev59.com/ulzUa4cB1Zd3GeqP4pQH#7894886

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

- ricka