web-dev-qa-db-fra.com

Comment valoriser translateX et translateY?

Je veux obtenir la valeur translateY du css en ligne avec le JavaScript.

Voici la valeur en ligne:

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

Ces codes me donnent la liste totale en variable:

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

console.log

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

Attend toTop comme - 12358.8px.

javascriptcsstransformtransition
21
Mo.

Il y a plusieurs façons. L'une des premières qui me vient à l'esprit est d'analyser la chaîne que vous obtenez.

Par exemple:

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'

Cependant, cela ne fonctionnera qu'avec translateZ explicitement défini (pas translate3d ni matrix3d). Un moyen le plus cohérent pourrait être getComputedStyle, mais cela obtiendrait toujours la valeur en unité px et n'est donc vraiment valide qu'au moment où vous le calculez (un redimensionnement de la fenêtre peut le changer):

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

Voir ce violon montrant les deux méthodes (notez que j'ai utilisé chrome pour les tests, j'ai donc préfixé votre CSS avec -webkit-).

MODIFIER:
Pour obtenir translateY, si votre navigateur de visiteurs est suffisamment récent pour prendre en charge getComputedStyle, vous pouvez modifier ma fonction getComputedTranslateZ pour gérer à la fois les valeurs matrix et matrix3d. C'est plus simple que d'essayer d'analyser toutes les chaînes CSS possibles (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;
}
23
Bali Balo

Si vous voulez la valeur brute sans 'px', vous pouvez utiliser une expression régulière comme celle-ci:

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

et obtenez la valeur comme ceci:

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

Ici est une démonstration de jsFiddle.

5
rusmus
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;

}
5
Shrishail Uttagi

Vous devrez peut-être calculer x et y de .slice (x, y) si vous avez plusieurs propriétés de traduction

  const trsString = element.style.transform; //eg "translateY(36px)"
  let num = trsString.slice(11, trsString.length - 3) 
  num = num.length == 0 ? 0 : parseInt(num) // will be 36
0
Servus