How to get value of translateX and translateY?

Question

I want to get translateY value from the in-line css with the JavaScript.

Here is the in-line value:

style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);"

These code give to me the total list in to variable:

var tabletParent = document.getElementById("scroller");
var toTop = tabletParent.style.transform;
console.log(toTop);

console.log

translate(0px, -12358.8px) scale(1) translateZ(0px)

Expecting toTop as -12358.8px.

Answer 1

There are multiple ways. One of the first that come to my mind is parsing the string you get.

For example:

function getTranslateZ(obj)
{
    var style = obj.style,
        transform = style.transform || style.webkitTransform || style.mozTransform,
        zT = transform.match(/translateZ\(([0-9]+(px|em|%|ex|ch|rem|vh|vw|vmin|vmax|mm|cm|in|pt|pc))\)/);
    return zT ? zT[1] : '0';
    //Return the value AS STRING (with the unit)
}
// getTranslateZ(tabletParent) => '0px'

However this will only work with translateZ explicitly defined (not translate3d nor matrix3d). A most consistent way might be getComputedStyle, but this would always get the value in px unit and thus is only truely valid at the time you compute it (a window resize can change it):

function getComputedTranslateZ(obj)
{
    if(!window.getComputedStyle) return;
    var style = getComputedStyle(obj),
        transform = style.transform || style.webkitTransform || style.mozTransform;
    var mat = transform.match(/^matrix3d\((.+)\)$/);
    return mat ? ~~(mat[1].split(', ')[14]) : 0;
    // ~~ casts the value into a number
}
// getComputedTranslateZ(tabletParent) => 0

See this fiddle showing both methods (note that I've been using chrome for the tests, so I've prefixed your CSS with -webkit-).

---

EDIT:
To get translateY, if your visitors browser is recent enough to support getComputedStyle, you could change my getComputedTranslateZ function to handle both matrix and matrix3d values. It is simpler than trying to parse every possible css strings (translateY, translate, translate3d, matrix, matrix3d):

function getComputedTranslateY(obj)
{
    if(!window.getComputedStyle) return;
    var style = getComputedStyle(obj),
        transform = style.transform || style.webkitTransform || style.mozTransform;
    var mat = transform.match(/^matrix3d\((.+)\)$/);
    if(mat) return parseFloat(mat[1].split(', ')[13]);
    mat = transform.match(/^matrix\((.+)\)$/);
    return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
}

Answer 2

If you want the raw value without 'px' you could use a regex like this:

var transZRegex = /\.*translateZ\((.*)px\)/i;

and get the value like this:

var zTrans = transZRegex.exec(test)[1];

Here is a jsFiddle demonstrating.

Answer 3

function getTranslateXValue(translateString){

  var n = translateString.indexOf("(");
  var n1 = translateString.indexOf(",");

  var res = parseInt(translateString.slice(n+1,n1-2));

return res;

}
function getTranslateYValue(translateString){

 var n = translateString.indexOf(",");
  var n1 = translateString.indexOf(")");

  var res = parseInt(translateString.slice(n+1,n1-1));
return res;

}

Answer 4

There is now a DOM API that provides a typed solution for this known as the CSS Object Model see here.

Part of that spec specifies a attributeStyleMap which you can use to get typed values for a transform value (or anything else).

const node = document.querySelector('#something')

const attrs = node.attributeStyleMap.get('transform')
if (!attrs) return

const translation = Array.from(attrs.values())
    .find(attr => attr instanceof CSSTranslate)

console.log(translation.x); // { value: 115, unit: 'px' }

Answer 5

You may have to work out x and y of .slice(x,y) if you have more than one translate property

  const trsString = element.style.transform; //eg "translateY(36px)"
  let num = trsString.slice(11, trsString.length - 3) 
  num = num.length == 0 ? 0 : parseInt(num) // will be 36

Answer 6

to get the raw value without 'px' you can use this:

function extractTranslateFromTransform(transform) {
    let translateValue = null;
    let translate = transform.match(/translate\(.*\)/)?.[0];
    if (translate) {
        translateValue = {};
        if (translate.indexOf(',') !== -1) {
            translateValue.x = parseFloat(translate.substring(translate.indexOf('(') + 1, translate.indexOf(',')));
            translateValue.y = parseFloat(translate.substring(translate.indexOf(',') + 1));
        } else {
            translateValue.x = translateValue.y = parseFloat(translate.substring(translate.indexOf('(') + 1));
        }
    }
    return translateValue;
}

const translate = extractTranslateFromTransform(document.getElementById('divWithTransform').style.transform);

console.log(translate);

<div id="divWithTransform" style="transform: translate(0px, -13361.5px) scale(1) translateZ(0px);" />