jquery - 直接使用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 返回字符串。

因此，无论您是否喜欢，您都必须解析字符串才能获取值。好消息是:我有两个解决方案。

现在，如果您非常确定前几个值始终相同，您可以简单地使用子字符串。但是，下一个问题:在 Google Chrome 中，值 -283.589px 被更改为 -283.5889892578125。

老实说，您需要更高级的字符串解析器才能获取正确的值。我欢迎正则表达式:

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

这会获取字符串的所有值。

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

var x = values[5];

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