使用jquery直接获取transform的css值

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返回字符串.

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

现在,如果您非常确定前几个值总是相同的,那么您可以简单地使用子字符串.但是,下一个问题是:在谷歌浏览器中,值-283.589px正在改为-283.5889892578125.

老实说,您需要一个更高级的字符串解析器来获取正确的值.我欢迎正则表达:

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

这将获取字符串的所有值.

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

var x = values[5];

这是我能提供的最佳解决方案,我很肯定这是唯一可行的解​​决方案.