使用 jquery 获取元素的 -webkit-transform 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5968227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the value of -webkit-transform of an element with jquery
提问by Matthias Loibl
I'm manipulating a div with the new cool css3 way of doing a transform like this:
我正在使用新的很酷的 css3 方式来操作一个 div 进行这样的转换：
$("#thediv").css("-webkit-transform","translate(-770px, 0px)");
Later on in the script I thought to get the value of the transform like this:
后来在脚本中，我想像这样获得转换的值：
$("#thediv").css("-webkit-transform");
It returns a matrix like this: matrix(1, 0, 0, 1, -770, 0)
它返回一个这样的矩阵：matrix(1, 0, 0, 1, -770, 0)
What I can't figure out is how to get the 5th value (-770) of this matrix...
我想不通的是如何获得这个矩阵的第 5 个值（-770）...
Any suggestions? Thanks!
有什么建议？谢谢！
回答by Blender
Your matrix is a 4x4 transformation matrix:
你的矩阵是一个 4x4 变换矩阵：
The -770 corresponds to the vx. To extract it, construct a WebkitCSSMatrixobject:
-770 对应于v x。要提取它，请构造一个WebkitCSSMatrix对象：
var style = window.getComputedStyle($('#thediv').get(0)); // Need the DOM object
var matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log(matrix.m41); // -770
回答by yckart
You could split the string into an array and get the desired value as usual. Here's a little helper function that does the split part.
您可以将字符串拆分为一个数组并像往常一样获得所需的值。这是一个完成拆分部分的小辅助函数。
function matrixToArray(str) {
return str.match(/\d+/g);
}
Update
更新
To preserve decimals: rgba(0, 0, 0, 0.5)
要保留小数： rgba(0, 0, 0, 0.5)
and negatives: matrix(1, 0, 0, 1, -770, 0)
和否定： matrix(1, 0, 0, 1, -770, 0)
function matrixToArray(str) {
return str.split('(')[1].split(')')[0].split(',');
}
Update2
更新2
RegExpbased solution that preserves decimal and negative numbers:
RegExp基于保留小数和负数的解决方案：
function matrixToArray(str) {
return str.match(/(-?[0-9\.]+)/g);
}
matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']
回答by Mark Rhodes
The reason you get the matrix string value, is that jQuery's cssfunction is obtaining the computed style(the result of window.getComputedStyle($("#thediv")[0]).webkitTransform).
您获得矩阵字符串值的原因是 jQuery 的css函数正在获取计算样式（ 的结果window.getComputedStyle($("#thediv")[0]).webkitTransform）。
To get the actual string value which you set it to in the previous call ("translate(-770px, 0px)") you can use:
要获取您在上一次调用 (" translate(-770px, 0px)") 中设置的实际字符串值，您可以使用：
var t = $("#thediv")[0].style.webkitTransform;
From that you could just use string methods to get the xvalue, e.g:
从那你可以只使用字符串方法来获取x值，例如：
t.substring(t.indexOf("(") + 1, t.indexOf(",") - 2)
which gives -770. However, note that this is only acceptable if you know that the value exists and is in the form you're using (with just a translate(xpx, ypx), since other values are valid!
这给-770. 但是，请注意，这仅在您知道该值存在且采用您正在使用的形式时才可接受（只有 a translate(xpx, ypx)，因为其他值都有效！
If you'd prefer to use the computed style, then (to add to @Maz's suggestion), to get the 5th value (the xtransform), you can do:
如果您更喜欢使用计算样式，那么（添加到@Maz 的建议中）要获得第 5 个值（x转换），您可以执行以下操作：
new WebKitCSSMatrix($("#thediv").css("-webkit-transform")).e;
To get the sixth one (the ytransform) you use the fproperty of the matrix.
要获得第六个（y变换），您可以使用f矩阵的属性。
回答by Lucia
Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here(more of a wrap up of gsap's) that could directly access these values like this:
由于我经常需要将 jQuery 与 TweenMax 一起使用，并且由于 TweenMax 已经处理了各种类型转换字符串的所有解析以及兼容性问题，因此我在这里编写了一个小 jquery 插件（更多是对 gsap 的总结），它可以像这样直接访问这些值：
$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x') // returns value of translate-x
The list of properties you could get/set, along with their initial properties:
您可以获取/设置的属性列表及其初始属性：
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
Paste from my other answer, hope this helps.
从我的另一个答案粘贴，希望这有帮助。
回答by Maz
I would recommend using the WebkitCSSMatrix object. http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/doc/uid/TP40009363
我建议使用 WebkitCSSMatrix 对象。http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/doc/uid/TP40009363
This object has as its attributes the matrix elements. It also provides convenience functions for various transformations.
该对象具有矩阵元素作为其属性。它还为各种转换提供了便利的功能。
回答by AABSTRKT
I have coded the simplest solution that ALSO works in Safari, Chrome AND Firefox :)
我编写了最简单的解决方案，它也适用于 Safari、Chrome 和 Firefox :)
The trick is NOT to reference the
诀窍是不要引用
.css("transform")
but the
但是
.css("translate")
property instead :
改为财产：
var matrix = $("#thediv").css('translate');
console.log ( matrix[1] );
// matrix result is of form [x , y]
// so for example matrix[1] will give you the transformY value :)
$('html,body').animate({scrollTop: matrix[1]}, 750);
I'm delighted to have found such an economical solution since I have been dealing with 3D transforms in webkit and 2D transforms in Firefox simultaneously, and using this method the property values can be accessed directly :)
我很高兴找到了这样一个经济的解决方案，因为我一直在同时处理 webkit 中的 3D 转换和 Firefox 中的 2D 转换，并且使用这种方法可以直接访问属性值:)
