javascript - ¿Cómo obtener valor de translateX y translateY?

css3 transform

Question

Quiero obtener un valor de translateY desde el css en línea con el JavaScript.

Aquí está el valor en línea:

style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);"

Estos códigos me dan la lista total en la variable:

var tabletParent = document.getElementById("scroller");
var toTop = tabletParent.style.transform;
console.log(toTop);

console.log

translate(0px, -12358.8px) scale(1) translateZ(0px)

Esperando toTop como -12358.8px .

Answer 1

Hay múltiples formas. Uno de los primeros que me vienen a la mente es analizar la cadena que obtienes.

Por ejemplo:

function getTranslateZ(obj)
{
var style = obj.style,
transform = style.transform || style.webkitTransform || style.mozTransform,
zT = transform.match(/translateZ/(([0-9]+(px|em|%|ex|ch|rem|vh|vw|vmin|vmax|mm|cm|in|pt|pc))/)/);
return zT ? zT[1] : ''0'';
//Return the value AS STRING (with the unit)
}
// getTranslateZ(tabletParent) => ''0px''

Sin embargo, esto solo funcionará con translateZ definido explícitamente (no translate3d ni matrix3d). Una forma más consistente podría ser getComputedStyle, pero esto siempre obtendría el valor en la unidad px y, por lo tanto, solo es verdaderamente válido en el momento en que lo computas (un cambio de tamaño de la ventana puede cambiarlo):

function getComputedTranslateZ(obj)
{
if(!window.getComputedStyle) return;
var style = getComputedStyle(obj),
transform = style.transform || style.webkitTransform || style.mozTransform;
var mat = transform.match(/^matrix3d/((.+)/)$/);
return mat ? ~~(mat[1].split('', '')[14]) : 0;
// ~~ casts the value into a number
}
// getComputedTranslateZ(tabletParent) => 0

Vea este fiddle que muestra ambos métodos (tenga en cuenta que he estado usando Chrome para las pruebas, así que he prefijado su CSS con -webkit- ).

EDITAR:
Para obtener la traducción, si el navegador de sus visitantes es lo suficientemente reciente como para ser compatible con getComputedStyle, puede cambiar mi función getComputedTranslateZ para manejar los valores de matrix y matrix3d. Es más sencillo que tratar de analizar todas las cadenas CSS posibles (translateY, translate, translate3d, matrix, matrix3d):

function getComputedTranslateY(obj)
{
if(!window.getComputedStyle) return;
var style = getComputedStyle(obj),
transform = style.transform || style.webkitTransform || style.mozTransform;
var mat = transform.match(/^matrix3d/((.+)/)$/);
if(mat) return parseFloat(mat[1].split('', '')[13]);
mat = transform.match(/^matrix/((.+)/)$/);
return mat ? parseFloat(mat[1].split('', '')[5]) : 0;
}

Answer 2

Si desea el valor bruto sin ''px'', podría usar una expresión regular como esta:

var transZRegex = //.*translateZ/((.*)px/)/i;

y obtener el valor de esta manera:

var zTrans = transZRegex.exec(test)[1];

Here hay una demostración de jsFiddle.

Answer 3

function getTranslateXValue(translateString){
var n = translateString.indexOf("(");
var n1 = translateString.indexOf(",");
var res = parseInt(translateString.slice(n+1,n1-2));
return res;
}
function getTranslateYValue(translateString){
var n = translateString.indexOf(",");
var n1 = translateString.indexOf(")");
var res = parseInt(translateString.slice(n+1,n1-1));
return res;
}