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.