web-dev-qa-db-ja.com

translateXとtranslateYの値を取得するにはどうすればよいですか？

JavaScriptを使用してインラインCSSからtranslateY値を取得したい。

インライン値は次のとおりです。

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

これらのコードは私に変数の合計リストを与えます：

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

console.log

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

-12358.8pxとしてtoTopが必要です。

javascriptcsstransformtransition
21
Mo.

複数の方法があります。最初に思い浮かぶのは、取得した文字列を解析することです。

例えば：

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'

ただし、これは明示的に定義されたtranslateZでのみ機能します（translate3dやmatrix3dでは機能しません）。最も一貫性のある方法はgetComputedStyleですが、これは常にpx単位で値を取得するため、計算時にのみ有効です（ウィンドウのサイズ変更で変更できます）。

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

両方の方法を示す this fiddle を参照してください（テストではchromeを使用しているため、CSSの前に-webkit-を付けました）。

編集：
translateYを取得するには、ビジターのブラウザーがgetComputedStyleをサポートするのに十分最近の場合、getComputedTranslateZ関数を変更して、matrixとmatrix3dの両方の値を処理できます。すべての可能なcss文字列（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

「px」なしの生の値が必要な場合は、次のような正規表現を使用できます。

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

次のような値を取得します。

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

ここ は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

変換プロパティが複数ある場合は、.slice（x、y）のxとyを計算する必要がある場合があります。

  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