How to get value translateX by javascript

Question

content element initialize with javascript

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

How to get value of translateX for this element ?

Answer 1

You can use 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>