Extract css conversion value directly using jquery

Question

I get -moz-transform: translate(-283.589px, 0px) from dom by doing element.style[vendor + 'Transform'] . Now I want to extract the value -283.589px so that I can use it in my application, but without getting the exact way to extract it. If I do console.log($('.slide').css("-moz-transform")) , it returns the value of the matrix as matrix(1, 0, 0, 1, -283.589px, 0px) . Is there any suitable way in jquery to directly extract the value of -283.589px . I do not want to do matrix calculations.

Answer 1

I have good news and bad news.

I'll start with the bad news: after examining the object that jQuery returns, the matrix object is nothing more than a string, and there is absolutely no way to get another object than a string. As far as we would like to disagree, it should not be a string: CSS values ​​are strings, so jQuery returns strings.

So, whether you like it or not, you really need to parse the string to get the value. The good news: I have two solutions.

Now, if you are VERY sure that the first pair of values ​​is ALWAYS the same, you can just use a substring. But, the following problem: in Google Chrome, the value of -283.589px changes to -283.5889892578125 .

Honestly, you need a more advanced string parser to get the correct value. I welcome the regex:

 var matrix = $('.selector').css('-moz-transform'); var values = matrix.match(/-?[\d\.]+/g); 

Gets all the values ​​of your string.

By choosing the correct index, you can get your value:

 var x = values[5]; 

This is the best solution I can provide, and I am sure that this is the only possible solution.

Answer 2

Since I constantly need to use jQuery along with TweenMax, and since TweenMax has already taken care of all the parsing of various types of conversion strings, as well as compatibility issues, I wrote a tiny jquery plugin here (more gsap wrap) that can directly access these values ​​as follows way:

 $('#ele').transform('rotationX') // returns 0 $('#ele').transform('x') // returns value of translate-x 

List of properties that you could get / set along with your initial properties:

 perspective: 0 rotation: 0 rotationX: 0 rotationY: 0 scaleX: 1 scaleY: 1 scaleZ: 1 skewX: 0 skewY: 0 x: 0 y: 0 z: 0 zOrigin: 0 

Answer 3

using var matrix = $('.selector').css('-moz-transform'); ,

 matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/); 

will provide you an object with {0, 1, 2, index, input}

[1] = x, [2] = y

Answer 4

While jQuery cannot do this alone, the Regex method will be better.
In the code below, the parseComplexStyleProperty functions take a string, which is, for example, the style attribute of an element and splits it into an object of keys and values:

 function parseComplexStyleProperty( str ){ var regex = /(\w+)\((.+?)\)/g, transform = {}, match; while( match = regex.exec(str) ) transform[match[1]] = match[2]; return transform; } ////////////////////////////////////////// var dummyString = $('something').attr('style'), transformObj = parseComplexStyleProperty(dummyString); console.log(dummyString, transformObj)