直接使用jquery获取transform的css值答案

【问题标题】：Fetch the css value of transform directly using jquery直接使用jquery获取transform的css值
【发布时间】：2012-01-25 22:29:34
【问题描述】：

我通过 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。我不想做任何矩阵计算。

【问题讨论】：

你不需要计算任何东西，因为值就在那里......
值在这里，但我该如何使用它。我想做类似 $('id').animate(left:X);其中 X = -283.589px。这就是我要找的。span>
您不能将矩阵作为数组访问吗？ var x = matrix[5];
是的，可以通过将其转换为数组来完成，但不想进行任何此类计算
Get the value of -webkit-transform of an element with jquery 的可能重复项

标签： jquery transform

【解决方案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];

这是我能提供的最佳解决方案，我很肯定这是唯一可能的解决方案。

【讨论】：

这不适用于底片 ;) matrix(1, 0, 0, 1, -770, 0) === [1, 0, 0, 1, 700, 0]
@yckart 我完全忘记了！我也更改了表达式以匹配负数，谢谢！
或者你可以找到第一个大括号并使用 split：var matrix = $('.selector').css('transform'), idx=matrix.indexOf('('), values=matrix.substring(idx+1, matrix.length-1).split(';'); 我敢打赌它表现更好。
@StijndeWitt 鉴于矩阵字符串相对较短且正则表达式相当简单，我怀疑性能会显着不同。如果要运行此代码数百万次，那么像您这样的微优化可能会有所作为。如果是这种情况，我建议首先缓存/优化 jQuery 调用，因为这可能就是卡顿的地方。但是，好点。
在输出索引 [5] 时，您将获得 y 值。不要忘记索引从 [0] 开始。所以 ScaleX 将是索引 [4]...

【解决方案2】：

由于我经常需要将 jQuery 与 TweenMax 一起使用，并且由于 TweenMax 已经处理了各种类型的转换字符串的所有解析以及兼容性问题，所以我编写了一个小型 jquery 插件here（更多的是总结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

【讨论】：

谢谢。用凉亭将其安装到导轨项目中，效果很好！比这里的其他答案干净得多。与 gsap 一起使用超级方便。

【解决方案3】：

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

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

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

[1] = x, [2] = y

【讨论】：

【解决方案4】：

虽然 jQuery 不能单独做到这一点，但 Regex 方法会更好。
在下面的代码中，parseComplexStyleProperty 函数接受一个字符串，例如，元素的 style 属性并将其分解为键和值的对象：

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)

【讨论】：