Как получить значение translateX и перевести?

Я хочу получить значение translateY из встроенного css с JavaScript.

Вот значение строки:

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)

Ожидание toTop как -12358.8px.

Ответ 1

Существует несколько способов. Один из первых, которые приходят мне на ум, анализирует строку, которую вы получаете.

Например:

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, явно определенным (not 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

Смотрите эту скрипту, показывая оба метода (обратите внимание, что я использовал хром для тестов, поэтому я префикс CSS с помощью -webkit-).

EDIT:
Чтобы получить перевод, если ваш браузер посетителей достаточно недавний, чтобы поддерживать getComputedStyle, вы можете изменить мою функцию getComputedTranslateZ для обработки как матричных, так и значений 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;
}

Ответ 2

Если вы хотите необработанное значение без 'px', вы можете использовать регулярное выражение, подобное этому:

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

и получите значение, подобное этому:

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

Здесь демонстрируется демонстрация jsFiddle.

Ответ 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;

}