CODEWITHSUNDEEP
jquerytransform
user850234
user850234

Reputation: 3463

Fetch the css value of transform directly using jquery

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

Upvotes: 7

Views: 19288

Answers (4)

vsync
vsync

Reputation: 130145

While jQuery cannot do this alone, a Regex method would be better.
In the below code the parseComplexStyleProperty functions takes a string which is, for example, the style attribute of an element and breaks 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)

Upvotes: 0

Lucia
Lucia

Reputation: 13571

Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here (more of a wrap up of gsap's) that could directly access these values like this:

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

The list of properties you could get/set, along with their 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

Upvotes: 4

Tim S.
Tim S.

Reputation: 13843

I've got good news and bad news.

I'll start with the bad news: After examining the object that jQuery returns, the matrix object is nothing but a string and there's absolutely no way you can get another object but a string. As much we would like to disagree that it shouldn't be a string: CSS values are strings, hence jQuery returns strings.

So, whether you like it or not, you really have to parse the string in order to get the value. The good news is: I've got two solutions.

Now, if you're VERY sure that the first couple of values are ALWAYS the same you could simply use substring. But, next problem: in Google Chrome, the value -283.589px is being changed to -283.5889892578125.

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

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

This gets all the values of your string.

By selecting the right index, you can get your value:

var x = values[5];

That's the best solution I can provide and I'm positive it's the only possible solution.

Upvotes: 26

user3123242
user3123242

Reputation: 29

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

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

would give you an object with { 0, 1, 2, index, input }

[1] = x, [2] = y

Upvotes: 0

Related Questions