获取元素的比例值？

Question

我想知道如何获得元素的缩放值？

我试图$(element).css('-webkit-transform');返回matrix(scaleX,0,0,scaleY,0,0);有越来越scaleX只有scaleY的一种方式？

Answer 1

如果它是由一个矩阵指定我想你不能用一个简单的方法，但你可以轻松地分析值：

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 2

如果您只需要针对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 3

对于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 4

最简单的方法来找出文档之间的比例因子和元素如下：

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

这工作，因为getBoundingClientRect返回的实际尺寸，而offsetWidth /身高是未缩放大小。