Recupera il valore css della trasformazione direttamente utilizzando jquery

Question

Mi sto ottenendo -moz-transform: translate(-283.589px, 0px) da dom facendo element.style[vendor + 'Transform']. Ora voglio estrarre il valore -283.589px per usarlo nella mia applicazione ma non ottenere il modo esatto per recuperarlo. Se faccio console.log($('.slide').css("-moz-transform")) restituisce il valore della matrice come matrix(1, 0, 0, 1, -283.589px, 0px). C'è un modo adeguato in jquery per recuperare direttamente il valore -283.589px. Non voglio fare alcun calcolo matriciale.

Answer 1

Ho buone notizie e cattive notizie.

Inizierò con le cattive notizie: dopo aver esaminato l'oggetto restituito da jQuery, l'oggetto matrix non è altro che una stringa e non è assolutamente possibile ottenere un altro oggetto tranne una stringa. Per quanto ci piacerebbe non essere d'accordo sul fatto che non dovrebbe essere una stringa: i valori CSS sono stringhe, quindi jQuery restituisce le stringhe.

Quindi, che ti piaccia o no, devi davvero analizzare la stringa per ottenere il valore. La buona notizia è: ho due soluzioni.

Ora, se sei MOLTO sicuro che il primo paio di valori sia SEMPRE lo stesso, potresti semplicemente usare la sottostringa. Ma, il prossimo problema: in Google Chrome, il valore -283.589px viene modificato in -283.5889892578125.

Onestamente, è necessario un parser di stringa più avanzato per ottenere il valore corretto. Accolgo espressioni regolari:

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

Questo ottiene tutti i valori della stringa.

Selezionando l'indice destro, è possibile ottenere il valore:

var x = values[5]; 

Questo è la soluzione migliore che posso fornire e sono sicuro che è l'unica soluzione possibile.

Answer 2

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

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

darebbe un oggetto con {0, 1, 2, indice, input}

[1] = x, [2] = y

Answer 3

Poiché ho costantemente bisogno di usare jQuery insieme a TweenMax e poiché TweenMax si occupava già di tutte le analisi dei vari tipi di stringhe di trasformazione e dei problemi di compatibilità, ho scritto un piccolo plugin jQuery here (più di un riepilogo di gsap) che potrebbe accedere direttamente a questo valore s come questo:

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

l'elenco delle proprietà che si potrebbe ottenere/set, insieme con le loro proprietà iniziali:

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 4

Mentre jQuery non può farlo da solo, un metodo Regex sarebbe meglio.
Nel codice sottostante le parseComplexStyleProperty funzioni prende una stringa che è, per esempio, l'attributo style di un elemento e rompe in un oggetto di chiavi e valori:

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)