如何通过javascript获取值translateX

Question

content元素用javascript初始化

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

如何获得translateX的价值？

Answer 1

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解释

Answer 2

如果你想要花哨(并且,就此而言,确切地说),你可以在Window对象上使用特殊方法.即,该.getComputedStyle()方法.

比方说,你的元素有一个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)").我们可能想要避免这种途径,因为它充其量只会让我们不得不解析字符串输出.

那么,我的建议是保持简单并只查询对象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');

Answer 3

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

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

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

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

Answer 4

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

注意：我是一个新手程序员，如果有什么不够清楚的地方，我很抱歉。

Answer 5

跨浏览器解决方案：

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，从它继承属性)。

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

Answer 6

您可以使用一些实验性功能：Element.computedStyleMap()

\n

\n

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

\n

\n

简短回答

\n

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

\n

\n

• 从索引获取值[0]：

  \n

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

  \n
\n

\n

演示：

\n

\r\n

\r\n

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

\r\n

let {\n  value,\n  unit\n} = document.getElementById(\'demo\').computedStyleMap().get(\'transform\')[0].y;\n\nconsole.log(value, unit); // 10 "px"

\r\n

body {\n  display: flex;\n  flex-direction: column;\n}\n\n.box {\n  align-self: center;\n  width: 150px;\n  height: 100px;\n  opacity: 0.5;\n}\n\n#orig {\n  position: absolute;\n  background-color: blue;\n}\n\n#demo {\n  background-color: red;\n  transform: translate(40px, 10px); /* << */\n}

\r\n

\r\n

\r\n

\n

\n

长答案

\n

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

\n

\n
• 搜索 或instanceof CSSTranslate, CSSScale\xe2\x80\xa6
\n

\n

演示

\n

\n

1. Element.computedStyleMap()\xe2\x87\x92StylePropertyMapReadOnly实例 \xe2\x80\xa6

   \n
\n

2. \xe2\x80\xa6 StylePropertyMapReadOnly.get(\'transform\')\xe2\x87\x92CSSTransformValue 实例 \xe2\x80\xa6

   \n

   el.computedStyleMap().get(\'transform\');`\n

   \n
\n

3. \xe2\x80\xa6.find()属性。与实例CSSTranslate\xe2\x80\xa6

   \n
\n

4. \xe2\x80\xa6 从坐标道具中提取您需要的内容。例如坐标X

   \n

    const {x: {value, unit}} = [\n     ...el.computedStyleMap?.()\n     .get(\'transform\')?.values()\n ].find(x => x instanceof CSSTranslate);\n\n console.log(value, unit); // \xe2\x9e\x9c 40 \'px\'\n

   \n
\n

\n

\r\n

\r\n

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

\r\n

el.computedStyleMap().get(\'transform\');`\n

\r\n

 const {x: {value, unit}} = [\n     ...el.computedStyleMap?.()\n     .get(\'transform\')?.values()\n ].find(x => x instanceof CSSTranslate);\n\n console.log(value, unit); // \xe2\x9e\x9c 40 \'px\'\n

\r\n

\r\n

\r\n

\n