Javascript 如何通过javascript获取值translateX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42267189/
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
How to get value translateX by javascript
提问by Parham Nikdouz
content element initialize with javascript
使用 javascript 初始化内容元素
content.children[0].style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
How to get value of translateX for this element ?
如何获取此元素的 translateX 值？
回答by caramba
var myElement = document.querySelector('.hello');
myElement.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";
function getTranslateX() {
var style = window.getComputedStyle(myElement);
var matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log('translateX: ', matrix.m41);
}
document.querySelector('button').addEventListener('click', getTranslateX);.hello {
height: 100px;
width: 100px;
background: orange;
}<div class="hello"></div>
<button type="button">get value</button>If you wonder why matrix.m41that is explained here
如果你想知道为什么在这里matrix.m41解释
回答by IsenrichO
If you want to be fancy (and, for that matter, exact), you can use a special method on the Windowobject. Namely, the .getComputedStyle()method.
如果您想要花哨（并且，就此而言，精确），您可以在Window对象上使用特殊方法。即.getComputedStyle()方法。
Let's say your element has an idof myElement. You could get do as follows:
假设您的元素有一个idof myElement。你可以做如下：
const myEl = document.getElementById('myElement');
window.getComputedStyle(myEl).transform;
Of course, what is returned reflects the collective effect of all other transformations applied upon the same element (e.g., rotations, translations, scalings, etc.). Furthermore, when querying for the value of transformstyle property, we tend to get something ugly in the form of a matrix transformation (e.g., "matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"). We probably want to avoid this avenue since, at best, it leaves us with the hassle of having to parse a string output.
当然，返回的内容反映了应用于同一元素的所有其他变换的集体效果（例如，旋转、平移、缩放等）。此外，当查询transformstyle 属性的值时，我们往往会以矩阵变换的形式（例如，"matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"）得到一些丑陋的东西。我们可能希望避免这种途径，因为充其量，它会给我们带来必须解析字符串输出的麻烦。
My recommendation, then, would be to stay simple and just query the transformproperty on the styleobject(more specifically, a CSSStyleDeclarationobject). Check it:
那么，我的建议是保持简单，只查询对象transform上的style属性（更具体地说，是一个CSSStyleDeclaration对象）。核实：
const transformStyle = document.getElementById('myElement').style.transform
// => "translateX(1239.32px)"
Again, we get a string-type output, but the hassle has been greatly eased by the simplicity of that string. By leveraging the replacemethod of the Stringobject's prototype and passing a simple regular expression, we can trim the value of transformStyleto just what we want:
同样，我们得到了一个字符串类型的输出，但是该字符串的简单性大大减轻了麻烦。通过利用对象原型的replace方法String并传递一个简单的正则表达式，我们可以将 的值修剪为transformStyle我们想要的值：
const translateX = transformStyle.replace(/[^\d.]/g, '');
// => "1239.32"
And if you want that output as a Numberdata type, simply append the +unary operator before the whole statement to coerce into such:
如果您希望该输出作为Number数据类型，只需+在整个语句之前附加一元运算符即可强制转换为：
const translateX_Val = +translateX;
// => 1239.32
Edit
编辑
Instead of doing
而不是做
window.getComputedStyle(myEl).transform;
the safer and recommended approach is probably to instead use the getPropertyValuemethod:
更安全和推荐的方法可能是使用以下getPropertyValue方法：
window
.getComputedStyle(myEl)
.getPropertyValue('transform');
回答by Aleksander Stelmaczonek
Using matrix parsing method from hereI was able to access transformation properties with following code:
使用这里的矩阵解析方法，我能够使用以下代码访问转换属性：
var transformation = window.getComputedStyle(myEl).getPropertyValue("transform").match(/(-?[0-9\.]+)/g);
If there is no transformation applied then transformationobject will be null, otherwise it will hold array of transformation properties. For 2D transformation it's going to be like this:
如果没有应用转换，则transformationobject 将是null，否则它将保存转换属性数组。对于2D转换它会像这样：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
