Je reçois -MOZ-Transform: Traduire (-283.589px, 0PX) de dom en faisant Element.style [Vendor + 'Transform'] . Maintenant, je veux extraire la valeur -283.589px pour l'utiliser dans mon application mais ne pas obtenir le moyen exact de le chercher. Si je fais console.log ($ ("diapositive"). CSS ("- Moz-Transform")) Il renvoie la valeur matricielle sous la matrice (1, 0, 0, 1 , -283.589PX, 0PX) . Y a-t-il une manière appropriée dans JQuery pour extraire directement la valeur -283.589px . Je ne veux pas faire de calcul de matrice.
4 Réponses :
J'ai de bonnes nouvelles et de mauvaises nouvelles.
Je vais commencer par la mauvaise nouvelle: après avoir examiné l'objet que JQuery revient, l'objet Matrix n'est qu'une chaîne et il y a Absolument aucun moyen, vous pouvez obtenir un autre objet, mais une chaîne. Autant que nous aimerions être en désaccord que cela ne devrait pas être une chaîne: les valeurs CSS sont des chaînes, d'où JQuery retourne des chaînes.
Donc, si vous l'aimez ou non, vous devez vraiment analyser la chaîne afin d'obtenir la valeur. La bonne nouvelle est la suivante: j'ai deux solutions.
Maintenant, si vous êtes certain que les premières valeurs sont toujours les mêmes, vous pouvez simplement utiliser la sous-chaîne. Mais, Problème suivant: Dans Google Chrome, la valeur Honnêtement, vous avez besoin d'une chaîne plus avancée. analyseur pour obtenir la valeur correcte. Je accueille une expression régulière: Ceci obtient toutes les valeurs de votre chaîne. En sélectionnant le bon index, vous pouvez obtenir votre valeur: C'est la meilleure solution que je puisse fournir et je suis positif c'est la seule solution possible. -283.589px est en cours de modification de -283.5889892578125 .
Cela ne fonctionne pas avec des négatifs;) matrice (1, 0, 0, 1, -770, 0) === [1, 0, 0, 1, 700, 0]
@yckart j'ai totalement oublié à ce sujet! J'ai changé l'expression pour faire correspondre des nombres négatifs aussi, merci!
Ou vous pouvez simplement trouver le premier brace et utiliser Split: var matrix = $ (sélecteur '). CSS (' "transformer '), idx = matrix.indexof (' ('), valse = matrix.substring ( IDX + 1, matrix.length-1) .Split (';'); Je parie qui fonctionne mieux.
@Stijndewittewitt étant donné que la chaîne matricielle est relativement courte et l'expression régulière plutôt simple, je doute que la performance diffère de manière significative. Si l'on veut exécuter ce code des millions de fois, les micro-optimisations comme la vôtre pourraient faire une différence. Si tel est le cas, je vous recommanderais d'abord la mise en cache / optimisation de l'appel JQuery, car c'est probablement l'endroit où les Janks sont. Mais toujours, bon point.
Lors de la sortie de l'index [5], vous obtenez la valeur y. N'oubliez pas que les index commencent à [0]. SOCALEX serait donc index [4] à la place ...
Utilisation de vous donnerait un objet avec {0, 1, 2, index, entrée} [1] = x, [2] = y var matrix = $ (sélecteur '). CSS (' - Moz-Transform '); ,
Depuis que je dois constamment utiliser JQuery avec TweenMax et puisque Tweenmax a déjà pris soin de toute l'analyse de différents types de chaînes de transformation ainsi que des problèmes de compatibilité, j'ai écrit un minuscule plugin JQuery ici (plus d'une conclusion de GSAP) qui pourrait accéder directement à ces valeurs telles que ceci:
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
Merci pour cela. Bower utilisé pour l'installer dans un projet de rails et cela fonctionne bien! Tellement plus propre que les autres réponses ici. Super pratique à utiliser avec GSAP.
Alors que JQuery ne peut pas faire cela seul, une méthode de regex serait meilleure. P>
Dans le code ci-dessous, les fonctions PARSECOMPOMPLEXSTYLELLEPROPERTY CODE> sont une chaîne qui est, par exemple, l'attribut code> style code> d'un élément et le casse dans un objet de clés et de valeurs:
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)
Vous n'avez rien à calculer car la valeur est juste là ...
La valeur est ici mais comment puis-je l'utiliser. Je veux faire quelque chose comme $ (ID '). Animate (à gauche: X); où x = -283.589px. Ceci est envie que je cherche.
Vous ne pouvez pas accéder à la matrice comme une matrice?
var x = matrice [5];Oui peut être fait en la convertissant en une matrice mais ne voulez pas faire de tel calcul
duplicata de Obtenez la valeur de -webkit- Transformer d'un élément avec jQuery