Obtenir la valeur de -webkit-transform d’un élément avec jquery

Votre masortingce est une masortingce de transformation 4×4:

Le -770 correspond au v _x . Pour l’extraire, construisez un object WebkitCSSMasortingx :

 var style = window.getComputedStyle($('#thediv').get(0)); // Need the DOM object var masortingx = new WebKitCSSMasortingx(style.webkitTransform); console.log(masortingx.m41); // -770 

Vous pouvez diviser la chaîne en un tableau et obtenir la valeur souhaitée comme d’habitude. Voici une petite fonction d’aide qui effectue la division.

 function masortingxToArray(str) { return str.match(/\d+/g); } 

Mettre à jour

Pour préserver les rgba(0, 0, 0, 0.5) décimaux: rgba(0, 0, 0, 0.5)

et négatifs: masortingx(1, 0, 0, 1, -770, 0)

 function masortingxToArray(str) { return str.split('(')[1].split(')')[0].split(','); } 

Mise à jour2

Solution basée sur RegExp qui préserve les nombres décimaux et négatifs:

 function masortingxToArray(str) { return str.match(/(-?[0-9\.]+)/g); } masortingxToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5'] masortingxToArray('masortingx(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0'] 

Je recommanderais d’utiliser l’object WebkitCSSMasortingx. http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMasortingxClassReference/WebKitCSSMasortingx/WebKitCSSMasortingx.html#//apple_ref/doc/uid/TP40009363

Cet object a pour atsortingbuts les éléments de la masortingce. Il fournit également des fonctions pratiques pour diverses transformations.

La raison pour laquelle vous obtenez la valeur de chaîne masortingcielle est que la fonction css de jQuery est en css obtenir le style calculé (résultat de window.getComputedStyle($("#thediv")[0]).webkitTransform ).

Pour obtenir la valeur de chaîne réelle que vous avez définie dans l’appel précédent (” translate(-770px, 0px) “), vous pouvez utiliser:

 var t = $("#thediv")[0].style.webkitTransform; 

À partir de là, vous pouvez simplement utiliser des méthodes de chaîne pour obtenir la valeur x , par exemple:

 t.subssortingng(t.indexOf("(") + 1, t.indexOf(",") - 2) 

ce qui donne -770 . Notez toutefois que cela n’est acceptable que si vous savez que la valeur existe et se présente sous la forme que vous utilisez (avec seulement une translate(xpx, ypx) , car les autres valeurs sont valides!

Si vous préférez utiliser le style calculé, alors (pour append à la suggestion de @ Maz), pour obtenir la 5ème valeur (la transformation x ), vous pouvez faire:

 new WebKitCSSMasortingx($("#thediv").css("-webkit-transform")).e; 

Pour obtenir le sixième (la transformation y ), vous utilisez la propriété f de la masortingce.

Comme je dois constamment utiliser jQuery avec TweenMax et que TweenMax s’occupe déjà de l’parsing de divers types de chaînes de transformation et de problèmes de compatibilité, j’ai écrit ici un minuscule plug-in jquery (qui résume bien gsap) qui pourrait accédez directement à ces valeurs comme ceci:

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

La liste des propriétés que vous pouvez obtenir / définir, ainsi que leurs propriétés initiales:

 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 

Collez de mon autre réponse, espérons que cela aide.

J’ai codé la solution la plus simple qui fonctionne également dans Safari, Chrome et Firefox 🙂

L’astuce n’est pas de faire référence à la

 .css("transform") 

mais le

 .css("translate") 

propriété à la place:

 var masortingx = $("#thediv").css('translate'); console.log ( masortingx[1] ); // masortingx result is of form [x , y] // so for example masortingx[1] will give you the transformY value :) $('html,body').animate({scrollTop: masortingx[1]}, 750); 

Je suis ravi d’avoir trouvé une solution aussi économique, car je traite simultanément des transformations 3D dans un kit Webkit et des transformations 2D dans Firefox. Cette méthode permet d’accéder directement aux valeurs de propriété 🙂