How to get value translateX by javascript
A cross browser solution:
function getTranslateXY(element) {
const style = window.getComputedStyle(element)
const matrix = new DOMMatrixReadOnly(style.transform)
return {
translateX: matrix.m41,
translateY: matrix.m42
}
}
Tests
We get this output (in a REPL style):
>> 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}
For those elements as arguments (passed to the aforementioned getTranslateXY
function):
<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
Pay attention to the mix (or absence) of translateX
/ translateY
and also translate3d
. We get proper results, no matter what CSS function we use (translate3d
contains values of translateX
and translateY
).
Explanation
Reagrding the matrix: we have 16 properties named m11
, m12
, m13
... m41
, m42
, m43
, m44
, that represent the columns and rows of the matrix. We are interested in the fourth column, and in the first and the second row. m41
holds the translateX
property, and m42
holds the translateY
property.
We use window.getComputedStyle(element)
instead of element.style
to get a uniformed representation of the transform
value (in the form of a matrix), so we won't need to use regex
, or parsing strings' headache.
Compatibility
Supported by all major browsers, except the notorious Internet Explorer, achieved by:
- Using
style.transform
instead ofstyle.webkitTransform
. - Using
DOMMatrixReadOnly
interface instead ofWebKitCSSMatrix
. (WebKitCSSMatrix
is an alias toDOMMatrix
, which is a mutable version ofDOMMatrixReadOnly
, that inherits properties from it).
I made this summary thanks to the great answers and comments in this thread, so the credit is all yours.
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
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');