How to get value translateX by javascript

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 ?

Answers:

Answer

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

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');
Answer

Using matrix parsing method from here I was able to access transformation properties with following code:

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

If there is no transformation applied then transformation object will be null, otherwise it will hold array of transformation properties. For 2D transformation it's going to be like this:

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.