javascript 检索 css3 缩放元素的宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5834624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve width/height of a css3 scaled element
提问by holographix
I'm fighting against an oddity (I think) of the offsetWidth property.
this is the scenario:
我正在与 offsetWidth 属性的奇怪（我认为）作斗争。
这是场景：
I've got, let's say, a spantag, in my js, at a certain point I perform a css3 transform to this element, like:
我有一个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);
at this point the log returns me fuzzy values, like it doesn't know what to say.
any suggestion?
此时日志返回给我模糊值，就像它不知道该说什么一样。
有什么建议吗？
回答by alex
getBoundingClientRect()returns the correct values for me.
getBoundingClientRect()为我返回正确的值。
回答by Michael Mullany
Transforms don't affect the intrinsic CSS properties, so you are seeing correct behavior. You need to look at the Current Transformation Matrix - as returned from getComputedStyle().webkitTransform in order to figure out how big something has been scaled.
转换不会影响固有的 CSS 属性，因此您会看到正确的行为。您需要查看从 getComputedStyle().webkitTransform 返回的 Current Transformation Matrix，以便确定某物的缩放比例。
Update: In Firefox 12 and later and Chrome/Safari - as Alex says below, you can use getBoundingClientRect() to take into account any transforms applied to an element
更新：在 Firefox 12 及更高版本和 Chrome/Safari 中 - 正如 Alex 在下面所说，您可以使用 getBoundingClientRect() 来考虑应用于元素的任何变换
The scale transition starts from 50%/50% because that's the default & correct behavior. If you want it to start from the origin, then you need to set transform-origin: 0% 0%;
比例转换从 50%/50% 开始，因为这是默认和正确的行为。如果要从原点开始，则需要设置transform-origin: 0% 0%;
回答by roberto tomás
I take it the span tag has display:block? transforms are only supposed to work for block elements. When I goto console and load jquery (just for ease) and do this:
我认为span标签有display:block？变换仅适用于块元素。当我转到控制台并加载 jquery（只是为了方便）并执行以下操作时：
$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})
$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})
nothing happens. But if I do this:
没发生什么事。但如果我这样做：
$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})
$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})
suddenly it changes, and offsetHeight increases. Disappointingly, the offset hight goes from 16 to 19, and not to 32 (although the visual appearance is double the size and maybe it is accurate) — but at least it does appear to work as advertised.
突然它改变了，offsetHeight 增加了。令人失望的是，偏移高度从 16 变为 19，而不是 32（尽管视觉外观是尺寸的两倍，而且可能是准确的）——但至少它看起来确实像宣传的那样工作。
回答by ricka
getBoundingClientRect() didn't work for me (in Chrome 49).
getBoundingClientRect() 对我不起作用（在 Chrome 49 中）。
This answer led me to another solution to my problem: https://stackoverflow.com/a/7894886/1699320
这个答案让我找到了另一个解决我的问题的方法：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
