如何通过 javascript 获取值 translateX答案

【问题标题】：How to get value translateX by javascript如何通过 javascript 获取值 translateX
【发布时间】：2017-02-16 07:10:34
【问题描述】：

使用 javascript 初始化内容元素

content.children[0].style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")";

如何获取该元素的 translateX 值？

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用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 解释了 here

【讨论】：

有跨浏览器的解决方案吗？
@chovy 在 2019 年你应该 DOMMatrix caniuse.com/#feat=dommatrix
@DOMMatrix 目前也不被 IE、edge 或 safari 支持。
@Tom 检查您来自 Scott (caniuse.com/#feat=dommatrix) 的评论上方的链接，也许它适用于 WebKitCSSMatrix
已弃用，现在是style.transform

【解决方案2】：

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

假设您的元素有一个 id 或 myElement。你可以这样做：

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

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

那么，我的建议是保持简单，只需查询style object 上的transform 属性（更具体地说，是CSSStyleDeclaration object）。检查它：

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

再次，我们得到一个字符串类型的输出，但是该字符串的简单性大大缓解了麻烦。通过利用String 对象原型的replace 方法并传递一个简单的正则表达式，我们可以将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');

【讨论】：

写得真好。
这是一个很好的答案，除了 win 使用 style.transform 属性你应该使用不同的方法来获取值，以防有多个转换，或者如果使用不同的单位，例如 vw。
感谢您的精彩回答。为了适应负值的可能性，您可以调整正则表达式，/[^-?\d.]/g
第二个更简单的选项在 Chrome 中对我不起作用，当我使用浏览器的开发工具检查计算的变换样式时，它以矩阵的形式给出，这可能是为什么它没有的线索不行。我最终使用了@caramba 接受的答案，它比最初看起来更简单。
正则表达式！我忘记了，但你的回答对我很有帮助！

【解决方案3】：

使用来自here 的矩阵解析方法，我能够通过以下代码访问转换属性：

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

如果没有应用转换，则transformation 对象将为null，否则它将保存转换属性数组。对于 2D 转换，它将类似于 this:

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

【讨论】：

【解决方案4】：

跨浏览器解决方案：

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。
使用DOMMatrixReadOnly 接口而不是WebKitCSSMatrix。（WebKitCSSMatrix 是 DOMMatrix 的别名，它是 DOMMatrixReadOnly 的可变版本，从它继承属性）。

感谢此线程中的出色答案和 cmet，我做了这个总结，所以功劳归你所有。

【讨论】：

【解决方案5】：

一种2021方法：

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

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

如果是一个包含 6 个值的二维矩阵，则结果如下：

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

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

【讨论】：

【解决方案6】：

你可以玩一些实验性功能：Element.computedStyleMap()

当前支持 Chrome 和 Edge（检查：caniuse.com）

简答

对于单身 transform [ 例如transform: translate(40px, 10px);]:

从索引[0]获取值：

el.computedStyleMap().get('transform')[0].y.value;

演示：

let {
  value,
  unit
} = document.getElementById('demo').computedStyleMap().get('transform')[0].y;

console.log(value, unit); // 10 "px"

body {
  display: flex;
  flex-direction: column;
}

.box {
  align-self: center;
  width: 150px;
  height: 100px;
  opacity: 0.5;
}

#orig {
  position: absolute;
  background-color: blue;
}

#demo {
  background-color: red;
  transform: translate(40px, 10px); /* << */
}

<div id="orig" class="box"></div>
<div id="demo" class="box"></div>

长答案

对于 multi transform [ 例如transform: translate(40px, 10px) scale(0.8, 0.5);]

搜索instanceof CSSTranslate 或CSSScale，...

演示

Element.computedStyleMap() ⇒ StylePropertyMapReadOnly 实例……
…StylePropertyMapReadOnly.get('transform') ⇒ CSSTransformValue 实例…
```
el.computedStyleMap().get('transform');`
```
….find() 道具。使用 instanceof CSSTranslate ...

…从坐标道具中提取你需要的东西。例如。 X坐标

 const {x: {value, unit}} = [
     ...el.computedStyleMap?.()
     .get('transform')?.values()
 ].find(x => x instanceof CSSTranslate);

 console.log(value, unit); // ➜ 40 'px'

const el = document.getElementById('demo');
const styleMap = el.computedStyleMap();      // ➜ StylePropertyMapReadOnly
const transform = styleMap.get('transform'); // ➜ CSSTransformValue
// console.log(transform);
/*
CSSTransformValue {
  0: CSSTranslate {
    x: CSSUnitValue {
         value: 40, 
         unit: 'px'
       },
    y: CSSUnitValue {
         value: 10, 
         unit: 'px'
       },
    z: ...
  }, 
  1: CSSScale {
    x: CSSUnitValue {
         value: 0.8, 
         unit: 'number'
       },
    y: CSSUnitValue {
         value: 0.5, 
         unit: 'number'
       }
  }
}
*/

const mx = transform.toMatrix();             // ➜  DOMMatrix
console.log(mx.toString());                  // ➜ 'matrix(0.8,   0,   0, 0.5,  40,  10)'
// console.log(mx)                           //     ⇒       a    b    c    d    e    f  
                                             //     ⇒     m11  m12  m21  m22  m41  m42 
                                        
console.log(transform.toString());           // ➜ 'translate(40px, 10px) scale(0.8, 0.5)' ━┓
const [translate, scale] = transform;        //                                             =
console.log(                                 // ➜ 'translate(40px, 10px) scale(0.8, 0.5)' ━┛
  ...[translate, scale].map(String)
); 

// ... alternative create new CSSTranslate() from CSS string e.g. 'translate(40px, 10px)': 
let translate2 = new CSSTranslate(
  ...translate.toString()                    // ➜ 'translate(40px, 10px)'
  .split(/[(,)]/)                            // ➜ ['translate', '40px', ' 10px', '']
  .slice(1, -1)                              // ➜ ['40px', ' 10px']
  .map(CSSNumericValue.parse)                // ➜ [CSSUnitValue {value: 40, unit: "px"}, ...]
);

const mx2 = translate2.toMatrix();           // ➜  DOMMatrix
console.log(mx2.toString())                  // ➜ 'matrix(1, 0, 0, 1, 40, 10)'

body {
  display: flex;
  flex-direction: column;
}

.box {
align-self: center;
  width: 150px;
  height: 100px;
  opacity: 0.5;
}

#orig {
  position: absolute;
  background-color: blue;
}

#demo {
  background-color: red;
  transform: translate(40px, 10px) scale(0.8, 0.5) /* << */
}

<div id="orig" class="box"></div>
<div id="demo" class="box"></div>

【讨论】：

这是一个合适的答案，但缺乏优雅。
只需将所有代码替换为el.computedStyleMap().get('transform')[0].y.value
@avalanche1 只要只有一个变换 fn，索引 [0] 就可以工作。如果有多个变换 fn，您需要 find() 索引：scale(..) transform(..) 在 [1] 处具有 CSSTranslate。在答案中添加了“短版”。

【解决方案7】：

我也想补充。我认为这很重要。

获取transform属性的css值。它将输出 3D 矩阵的值。
您将需要一个特定的数字来获取该值。

4x4 齐次矩阵的 16 个值之一。例如，m12 表示第一行第二列的值。
在矩阵中查找 css 属性“transform: scaleY (0);”的值将 css 中的 0 更改为 44 例如。

let box = document.querySelector('.menu-1');
let getStyle = getComputedStyle(box);
let matrix = new DOMMatrixReadOnly(getStyle.transform);
console.clear();
console.info("gmatrix.m11 = ", matrix.m11);
console.info("gmatrix.m12 = ", matrix.m12);
console.info("gmatrix.m13 = ", matrix.m13);
console.info("gmatrix.m14 = ", matrix.m14);
console.info("gmatrix.m21 = ", matrix.m21);
console.info("gmatrix.m22 = ", matrix.m22);
console.info("gmatrix.m23 = ", matrix.m23);
console.info("gmatrix.m24 = ", matrix.m24);
console.info("gmatrix.m31 = ", matrix.m31);
console.info("gmatrix.m32 = ", matrix.m32);
console.info("gmatrix.m33 = ", matrix.m33);
console.info("gmatrix.m34 = ", matrix.m34);
console.info("gmatrix.m41 = ", matrix.m41);
console.info("gmatrix.m42 = ", matrix.m42);
console.info("gmatrix.m43 = ", matrix.m43);
console.info("gmatrix.m44 = ", matrix.m44);

【讨论】：