获取元素的比例值？

Question

我想知道如何获得元素的比例值？

我试过$(element).css('-webkit-transform');哪个回归matrix(scaleX,0,0,scaleY,0,0);有没有办法获得scaleX而且scaleY只有？

Answer 1

找出文档和元素之间的比例因子的最简单的解决方案如下:

var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

这是有效的,因为getBoundingClientRect返回实际尺寸,而offsetWidth/Height是未缩放的尺寸.

Answer 2

如果它是由矩阵指定的,我猜你不能用一种简单的方法,但你可以很容易地解析这个值:

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]将包含scaleX matches[2]并将包含scaleY.如果可能还应用了其他转换,则需要稍微调整正则表达式,因为现在它假定所有其他参数都为0.

获取比例值的方法可能是删除任何变换,测量元素的计算宽度/高度,然后将它们添加回来再次测量.然后划分新/旧值.没试过,但它可能会奏效.jQuery本身对许多测量使用类似的方法,它甚至还有一个未记录的$.swap()函数.

PS:您正在使用-o-transform -moz-transform和-ms-transform太,对不对？

Answer 3

如果您只需要定位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/

Answer 4

您可以使用以下内容：

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 ")"