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>

Same as above example but using deprecated: 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>

If you wonder why matrix.m41 that is explained here

Answer 2

If you want to be fancy (and, for that matter, exact), you can use a special method on the Window object. Namely, the .getComputedStyle() method.

Let's say your element has an id of myElement. You could get do as follows:

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

Of course, what is returned reflects the collective effect of all other transformations applied upon the same element (e.g., rotations, translations, scalings, etc.). Furthermore, when querying for the value of transform style property, we tend to get something ugly in the form of a matrix transformation (e.g., "matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"). We probably want to avoid this avenue since, at best, it leaves us with the hassle of having to parse a string output.

My recommendation, then, would be to stay simple and just query the transform property on the style object (more specifically, a CSSStyleDeclaration object). Check it:

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

Again, we get a string-type output, but the hassle has been greatly eased by the simplicity of that string. By leveraging the replace method of the String object's prototype and passing a simple regular expression, we can trim the value of transformStyle to just what we want:

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

And if you want that output as a Number data type, simply append the + unary operator before the whole statement to coerce into such:

const translateX_Val = +translateX; // => 1239.32 

---

Edit

Instead of doing

window.getComputedStyle(myEl).transform; 

the safer and recommended approach is probably to instead use the getPropertyValue method:

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