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

Question

Я хочу получить 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.

Answer 1

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

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

и получить значение, как это:

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

Here является демонстрирующее jsFiddle.

Answer 2

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

Например:

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, но это всегда будет получить значение в блоке рха и, таким образом, только истинно действительный на момент его вычисление (окно изменение размер можно изменить):

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

---

EDIT:
Чтобы получить translateY, если ваши посетители браузер достаточно свежая для поддержки getComputedStyle, вы можете изменить свою getComputedTranslateZ функцию, чтобы обрабатывать как матрицу и matrix3D значения. Это проще, чем пытаться проанализировать все возможные строки CSS (translateY, переводить, translate3d, матрица, 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 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; 

}