直接使用jquery获取transform的css值

Question

我通过做element.style[vendor + 'Transform']从dom得到-moz-transform: translate(-283.589px, 0px)。现在我想提取值-283.589px在我的应用程序中使用它，但没有得到确切的方式来获取它。如果我做console.log($('.slide').css("-moz-transform"))，它返回矩阵值为matrix(1, 0, 0, 1, -283.589px, 0px)。是否有一个合适的方法在jquery中直接获取值-283.589px。我不想做任何矩阵计算

Answer 1

我有好消息和坏消息。

我将从坏消息开始:在检查了jQuery返回的对象之后，matrix对象只是一个字符串，并且绝对没有办法获得其他对象。尽管我们不同意它不应该是字符串:CSS值是字符串，因此jQuery返回字符串。

所以，不管你喜不喜欢，你都必须解析字符串来获取值。好消息是:我有两个解决方案。

现在，如果你非常确定前两个值总是相同的，你可以简单地使用substring。但是，下一个问题:在谷歌浏览器中，值-283.589px被更改为-283.5889892578125。

老实说，您需要一个更高级的字符串解析器来获得正确的值。欢迎正则表达式:

var matrix = $('.selector').css('-moz-transform');
var values = matrix.match(/-?[d.]+/g);

获取字符串的所有值。

通过选择正确的索引，您可以得到您的值:

var x = values[5];

这是我能提供的最好的解决方案，我确信这是唯一可能的解决方案。

Answer 2

由于我经常需要将jQuery与TweenMax一起使用，并且TweenMax已经处理了各种类型的转换字符串的所有解析以及兼容性问题，因此我在这里编写了一个小的jQuery插件(更多的是对gsap的包装)，可以像这样直接访问这些值:

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

您可以获取/设置的属性列表，以及它们的初始属性:

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

Answer 3

using var matrix = $('.selector').css('-moz-transform');，

matrix.match(/([-+]?(?:d*.)?d+)D*, ([-+]?(?:d*.)?d+)D*)/);

会给你一个带有{0,1,2,index, input}的对象

[1] = x， [2] = y

Answer 4

虽然jQuery无法单独完成此操作，但使用Regex方法会更好。
在下面的代码中，parseComplexStyleProperty函数接受一个字符串(例如，元素的style属性)，并将其分解为一个包含键和值的Object:

function parseComplexStyleProperty( str ){
   var regex = /(w+)((.+?))/g,
       transform = {},
       match;
   while( match = regex.exec(str) )
       transform[match[1]] = match[2];
  
   return transform;
}
//////////////////////////////////////////
var dummyString = $('something').attr('style'),
    transformObj = parseComplexStyleProperty(dummyString);
console.log(dummyString, transformObj)