javascript 获取 div 的 translate3d 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7982053/
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 translate3d values of a div?
提问by fancy
Say a div has this applied to it:
假设一个 div 应用了这个：
-webkit-transform: translate3d(0px, -200px, 0px)
How could I retrieve those values with jQuery?
我怎样才能用 jQuery 检索这些值？
回答by Trevor Lundeen
If you change the accepted answer's match() pattern to this it adds support for negative numbers:
如果您将接受的答案的 match() 模式更改为此，它会增加对负数的支持：
$(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)
回答by Brian Nickel
The value gets stored either as a matrixor a matrix3d, depending on whether or not the z value was set. Assuming no other transformations, for a 2D matrix, X and Y are the last two values. For a 3D matrix, X, Y, Z, 1 are the last four digits.
该值存储为 amatrix或 a matrix3d，具体取决于是否设置了 z 值。假设没有其他变换，对于 2D 矩阵，X 和 Y 是最后两个值。对于 3D 矩阵，X、Y、Z、1 是最后四位数字。
You could use a regular expression to get the values:
您可以使用正则表达式来获取值：
function getTransform(el) {
var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)
if(!results) return [0, 0, 0];
if(results[1] == '3d') return results.slice(2,5);
results.push(0);
return results.slice(5, 8);
}
回答by Ben Allen
If you update the regular expression to the following it adds supports for those odd cases when your transform has floats:
如果您将正则表达式更新为以下内容，它会在您的转换具有浮点数时添加对这些奇怪情况的支持：
/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/
回答by parliament
I don't know about the various edge cases, but in my case it's always 3 values like 'translate3d(23px, 34px, 40px)', so this was the cleanest way I could find:
我不知道各种边缘情况，但在我的情况下，它总是 3 个值，如“translate3d(23px,34px,40px)”，所以这是我能找到的最干净的方法：
function getMatrix(element) {
const values = element.style.transform.split(/\w+\(|\);?/);
const transform = values[1].split(/,\s?/g).map(parseInt);
return {
x: transform[0],
y: transform[1],
z: transform[2]
};
}
Result:
结果：
{x: 238, y: 0, z: 0}
回答by volkovbro
I can't add comment to @parliament answer so I'll write here.
我无法在@parliament 答案中添加评论，所以我会写在这里。
Be careful with map(parseInt)because ['1', '7', '11'].map(parseInt) returns [1, NaN, 3]source.
小心map(parseInt)因为['1', '7', '11'].map(parseInt) returns [1, NaN, 3]来源。
Better to use .map(numStr => parseInt(numStr))
更好用 .map(numStr => parseInt(numStr))
function getMatrix(element) {
const values = element.style.transform.split(/\w+\(|\);?/);
const transform = values[1].split(/,\s?/g).map(numStr => parseInt(numStr));
return {
x: transform[0],
y: transform[1],
z: transform[2]
};
}
回答by simonlchilds
EDIT: This is wrong, ignore this.
编辑：这是错误的，忽略这一点。
I think if you do something like...
我想如果你做这样的事情......
var styles = $('.myclass').css('-webkit-transform');
You would probably get the translate3d(0px, -200px, 0px)back.
你可能会得到translate3d(0px, -200px, 0px)回报。
Maybe you could then parse that string? seems like a bit of a hack though.
也许你可以解析那个字符串？虽然看起来有点像黑客。
