Question

我通过-moz-transform: translate(-283.589px, 0px)从dom获得element.style[vendor + 'Transform']。现在我想提取值-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返回字符串。

所以，无论你喜欢与否，你都必须解析字符串才能获得价值。好消息是：我有两个解决方案。

现在，如果您非常确定前几个值总是相同的，那么您可以简单地使用子字符串。但是，下一个问题是：在Google Chrome中，值-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插件here（更多的是结束可以直接访问这些值的gsap＆＃39; s：

$('#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

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

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

会给你一个{0,1,2，索引，输入}

的对象

[1] = x，[2] = y

Answer 4

虽然jQuery不能单独执行此操作，但正则表达式方法会更好在下面的代码中，parseComplexStyleProperty函数接受一个字符串，例如，元素的style属性，并将其分解为键和值的对象：

＆＃13;

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)

＆＃13;

使用jquery直接获取transform的css值

4 个答案: