Javascript 获取元素的比例值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5603615/
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
Get the scale value of an element?
提问by einstein
I'm wondering how I can get the scale value of an element?
我想知道如何获得元素的比例值？
I have tried $(element).css('-webkit-transform');which returns matrix(scaleX,0,0,scaleY,0,0);Is there a way of getting scaleXand scaleYonly?
我试过$(element).css('-webkit-transform');哪个返回matrix(scaleX,0,0,scaleY,0,0);有没有办法得到scaleX并且scaleY只有？
采纳答案by Lea Verou
If it was specified by a matrix I guess you can't with a straightforward way, but you can easily parse the value:
如果它是由矩阵指定的，我想你不能用简单的方法，但你可以很容易地解析这个值：
var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
matches = $(element).css('-webkit-transform').match(matrixRegex);
matches[1]will contain scaleX and matches[2]will contain scaleY. If it's possible that other transformations have also been applied, you'd need to slightly tweak the regex, because now it assumes that all other parameters are 0.
matches[1]将包含 scaleXmatches[2]并将包含 scaleY。如果可能还应用了其他转换，则需要稍微调整正则表达式，因为现在它假定所有其他参数均为 0。
A way to just get the scale values might be to remove any transforms, measure the computed width/height of the element and then add them back and measure again. Then divide new/old values. Haven't tried it, but it might work. jQuery itself uses a similar approach for many measurements, it even has an undocumented $.swap()function just for this.
获取比例值的一种方法可能是删除任何变换，测量元素的计算宽度/高度，然后将它们添加回来并再次测量。然后划分新/旧值。没试过，但可能有用。jQuery 本身在许多测量中使用了类似的方法，它甚至有一个未记录的$.swap()函数。
PS: You are using -o-transform-moz-transformand -ms-transformtoo, right?
PS：你也在用-o-transform-moz-transformand-ms-transform对吧？
回答by Joel Richard
The simplest solution to find out the scale factor between the document and an element is the following:
找出文档和元素之间比例因子的最简单解决方案如下：
var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
This works because getBoundingClientRect returns the actual dimension while offsetWidth/Height is the unscaled size.
这是有效的，因为 getBoundingClientRect 返回实际尺寸，而 offsetWidth/Height 是未缩放的尺寸。
回答by methodofaction
If you need to target webkit only (because it's for the iPhone, or iPad) the most reliable and fast way is using the native javascript webkit provides:
如果您只需要针对 webkit（因为它适用于 iPhone 或 iPad），最可靠和快速的方法是使用原生 javascript webkit 提供：
node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix
You can view a demo here: http://jsfiddle.net/umZHA/
您可以在此处查看演示：http: //jsfiddle.net/umZHA/
回答by caiocpricci2
Too late for the OP but might be useful in the future. There is a straightforward way to do it using splits:
对于 OP 来说为时已晚，但将来可能会有用。有一种使用拆分的直接方法：
function getTransformValue(element,property){
var values = element[0].style.webkitTransform.split(")");
for (var key in values){
var val = values[key];
var prop = val.split("(");
if (prop[0].trim() == property)
return prop[1];
}
return false;
}
This is webkit specific, but can easily be extended for more browsers modifying the fist line.
这是特定于 webkit 的，但可以很容易地扩展到修改第一行的更多浏览器。
回答by 1.21 gigawatts
You could use the following:
您可以使用以下内容：
var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").matrix.split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]);
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
