Ottieni il valore di scala di un elemento?

Mi chiedo come posso ottenere il valore di scala di un elemento?

Ho provato $(element).css('-webkit-transform'); che restituisce la matrix(scaleX,0,0,scaleY,0,0); C’è un modo per ottenere scaleX e scaleY solo?

Se è stato specificato da una matrice, immagino che non sia ansible con un metodo diretto, ma puoi facilmente analizzare il valore:

 var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, matches = $(element).css('-webkit-transform').match(matrixRegex); 

matches[1] conterranno scaleX e le matches[2] conterranno scaleY. Se è ansible che siano state applicate anche altre trasformazioni, è necessario modificare leggermente la regex, poiché ora presuppone che tutti gli altri parametri siano 0.

Un modo per ottenere i valori di scala potrebbe essere quello di rimuovere qualsiasi trasformazione, misurare la larghezza / altezza calcasting dell’elemento e quindi aggiungerli e misurare nuovamente. Quindi dividi i nuovi / vecchi valori. Non l’ho provato, ma potrebbe funzionare. jQuery stesso usa un approccio simile per molte misurazioni, ha anche una funzione $.swap() non documentata proprio per questo.

PS: stai usando -o-transform -moz-transform e -ms-transform troppo, giusto?

La soluzione più semplice per scoprire il fattore di scala tra il documento e un elemento è la seguente:

 var element = document.querySelector('...'); var scaleX = element.getBoundingClientRect().width / element.offsetWidth; 

Ciò funziona perché getBoundingClientRect restituisce la dimensione effettiva mentre offsetWidth / Height è la dimensione non graduata.

Se è necessario indirizzare solo il webkit (perché è per l’iPhone o l’iPad) il modo più affidabile e veloce è quello di utilizzare il javascript nativo del webkit:

 node = $("#yourid")[0]; var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform); alert(curTransform.a); // curTransform is an object, alert(curTransform.d); // a through f represent all values of the transformation matrix 

Puoi vedere una demo qui: http://jsfiddle.net/umZHA/

Troppo tardi per l’OP, ma potrebbe essere utile in futuro. C’è un modo semplice per farlo usando split:

 function getTransformValue(element,property){ var values = element[0].style.webkitTransform.split(")"); for (var key in values){ var val = values[key]; var prop = val.split("("); if (prop[0].trim() == property) return prop[1]; } return false; } 

Questo è specifico per il webkit, ma può essere facilmente esteso per altri browser che modificano la prima linea.