您可以使用Window.getComputedStyle()

var myElement = document.querySelector('.hello');
// set inline-style transform to element
myElement.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";

function getTranslateX() {
  var style = window.getComputedStyle(myElement);
  var matrix = new WebKitCSSMatrix(style.transform);
  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>

与上面的示例相同，但不推荐使用： style.webkitTransform

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>

如果你想知道为什么在这里matrix.m41解释

如果您想要花哨（并且，就此而言，精确），您可以在Window对象上使用特殊方法。即.getComputedStyle()方法。

假设您的元素有一个idof myElement。你可以做如下：

const myEl = document.getElementById('myElement');
window.getComputedStyle(myEl).transform;

当然，返回的内容反映了应用于同一元素的所有其他变换的集体效果（例如，旋转、平移、缩放等）。此外，当查询transformstyle 属性的值时，我们往往会以矩阵变换的形式（例如，"matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"）得到一些丑陋的东西。我们可能希望避免这种方式，因为充其量，它会给我们带来必须解析字符串输出的麻烦。

那么，我的建议是保持简单，只查询对象transform上的style属性（更具体地说，是一个CSSStyleDeclaration对象）。核实：

const transformStyle = document.getElementById('myElement').style.transform
// => "translateX(1239.32px)"

同样，我们得到了一个字符串类型的输出，但是该字符串的简单性大大减轻了麻烦。通过利用对象原型的replace方法String并传递一个简单的正则表达式，我们可以将 的值修剪为transformStyle我们想要的值：

const translateX = transformStyle.replace(/[^\d.]/g, '');
// => "1239.32"

如果您希望该输出作为Number数据类型，只需+在整个语句之前附加一元运算符即可强制转换为：

const translateX_Val = +translateX;
// => 1239.32

编辑

而不是做

window.getComputedStyle(myEl).transform;

更安全和推荐的方法可能是使用以下getPropertyValue方法：

window
  .getComputedStyle(myEl)
  .getPropertyValue('transform');

使用这里的矩阵解析方法，我能够使用以下代码访问转换属性：

var transformation = window.getComputedStyle(myEl).getPropertyValue("transform").match(/(-?[0-9\.]+)/g);

如果没有应用转换，则transformationobject 将是null，否则它将保存转换属性数组。对于2D转换它会像这样：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

跨浏览器解决方案：

function getTranslateXY(element) {
    const style = window.getComputedStyle(element)
    const matrix = new DOMMatrixReadOnly(style.transform)
    return {
        translateX: matrix.m41,
        translateY: matrix.m42
    }
}

测试

我们得到这个输出（以REPL风格）：

>> getTranslateXY(element1)
{translateX: 0, translateY: 0}
>> getTranslateXY(element2)
{translateX: 0, translateY: -90}
>> getTranslateXY(element3)
{translateX: 30, translateY: 0}
>> getTranslateXY(element4)
{translateX: 10, translateY: 20}
>> getTranslateXY(element5)
{translateX: -400, translateY: 500}

对于那些作为参数的元素（传递给上述getTranslateXY函数）：

<div/>                                                         // element1 
<div style="transform: translateY(-90px);"/>                   // element2 
<div style="transform: translateX(30px);"/>                    // element3
<div style="transform: translateX(10px) translateY(20px);"/>   // element4
<div style="transform: translate3d(-400px, 500px, 0px);"/>     // element5

注意translateX/translateY和的混合（或不存在）translate3d。无论我们使用什么 CSS 函数（translate3d包含translateX和 的值translateY），我们都能得到正确的结果。

解释

重新排列矩阵：我们有 16 个属性，名为m11, m12, m13... m41, m42, m43, m44, 代表矩阵的列和行。我们对第四列、第一行和第二行感兴趣。m41持有translateX财产，并m42持有translateY财产。

我们使用window.getComputedStyle(element)代替element.style来获得transform值的统一表示（以矩阵的形式），因此我们不需要使用regex, 或解析字符串的头痛。

兼容性

除了臭名昭著的 Internet Explorer 之外，所有主要浏览器都支持，通过以下方式实现：

• 使用style.transform代替style.webkitTransform.
• 使用DOMMatrixReadOnlyinterface 而不是WebKitCSSMatrix. (WebKitCSSMatrix是 的别名DOMMatrix，它是 的可变版本DOMMatrixReadOnly，从它继承属性)。

感谢这个帖子中的精彩回答和评论，我做了这个总结，所以功劳归你所有。

一个2021的方法：

您可以使用window.getComputedStyle(element).getPropertyValue("css property").

这里的 css 属性是 ("transform") 。

结果 if 是一个包含 6 个值的 2d 矩阵，如下所示：

matrix(1, 0, 0, 1, 10, 20)

第 5 个值是 translateX ，第 6 个值是 translateY 。

如果然后您想操作该矩阵中的值增加或减少您可以使用 split() 方法将其转换为数组，然后将从该数组中获得的值转换为如下所示的数字：

   let matrex = window.getComputedStyle(element).getPropertyValue("transform");
       //matrix(1, 0, 0, 1, 10, 20)
       let matrexArr = matrex.split(", ");
      //Array(6) [ "matrix(1", "0", "0", "1", "10", "20)" ]
       let translateXNum = parseInt(matrexArr[4]);
       //10

注意：我是一个新手程序员，如果有什么不够清楚，请见谅。