How To Get Value Of Translatex And Translatey?

October 27, 2023 Post a Comment

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

Solution 1:

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

For example:

functiongetTranslateZ(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):

functiongetComputedTranslateZ(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):

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

Solution 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.

Solution 3:

functiongetTranslateXValue(translateString){

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

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

return res;

}
functiongetTranslateYValue(translateString){

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

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

}

Solution 4:

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

Solution 5:

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

functionextractTranslateFromTransform(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);

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

JavaScript Controls