我想知道如何获得元素的比例值？
我试过$(element).css('-webkit-transform');哪个返回matrix(scaleX,0,0,scaleY,0,0);有没有办法得到scaleX并且scaleY只有？
获取元素的比例值？
IT技术
javascript
jquery
css
2021-02-20 19:02:10
5个回答
找出文档和元素之间比例因子的最简单解决方案如下：
var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
这是有效的，因为 getBoundingClientRect 返回实际尺寸，而 offsetWidth/Height 是未缩放的尺寸。
如果它是由矩阵指定的，我想你不能用简单的方法，但你可以很容易地解析这个值：
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]将包含 scaleXmatches[2]并将包含 scaleY。如果可能还应用了其他转换，则需要稍微调整正则表达式，因为现在它假定所有其他参数均为 0。
获取比例值的一种方法可能是删除任何变换，测量元素的计算宽度/高度，然后将它们添加回来并再次测量。然后划分新/旧值。没试过，但可能有用。jQuery 本身在许多测量中使用了类似的方法，它甚至有一个未记录的$.swap()函数用于此目的。
PS：你也在用-o-transform -moz-transformand-ms-transform对吧？
如果您只需要针对 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
您可以在此处查看演示：http : //jsfiddle.net/umZHA/
您可以使用以下内容：
var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("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 ")"
对于 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;
}
这是特定于 webkit 的，但可以很容易地扩展到修改第一行的更多浏览器。