如何通过javascript获取值translateX

Question

内容元素用javascript初始化

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

如何获取此元素的 translateX 值？

原文由 Mohammad Nikdouz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 在这里 解释

原文由 caramba 发布，翻译遵循 CC BY-SA 4.0 许可协议

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)"

同样，我们得到了一个字符串类型的输出，但是这个字符串的简单性大大减轻了麻烦。通过利用 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');

原文由 IsenrichO 发布，翻译遵循 CC BY-SA 3.0 许可协议