使用jquery直接获取transform的css值
我-moz-transform: translate(-283.589px, 0px)通过执行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 。 我不想做任何矩阵计算。
我有好消息和坏消息。
我将从坏消息开始：在检查jQuery返回的对象之后， matrix对象只是一个字符串，并且绝对没有办法获得另一个对象而是一个字符串。 我们也不同意它不应该是一个字符串：CSS值是字符串，因此jQuery返回字符串。
所以，无论你喜欢与否，你都必须解析字符串才能获得价值。 好消息是：我有两个解决方案。
现在，如果您非常确定前几个值总是相同的，那么您可以简单地使用子字符串。 但是，下一个问题：在谷歌浏览器中，值-283.589px正在更改为-283.5889892578125 。
老实说，您需要一个更高级的字符串解析器来获取正确的值。 我欢迎正则表达：
var matrix = $('.selector').css('-moz-transform'); var values = matrix.match(/-?[\d\.]+/g);
这将获取字符串的所有值。
通过选择正确的索引，您可以获得您的价值：
var x = values[5];
这是我能提供的最佳解决方案，我很肯定这是唯一可行的解决方案。
由于我经常需要将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
使用var matrix = $('.selector').css('-moz-transform'); ，
matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/);
会给你一个{0,1,2，索引，输入}的对象
[1] = x，[2] = y
虽然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)