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

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的，但可以轻松扩展，以便更多浏览器修改第一行。

Answer 5

您可以使用以下内容：

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

获取元素的比例值？

5 个答案: