如何获得translateX和translateY的价值？ [英] How to get value of translateX and translateY?

问题描述

我想使用JavaScript从内联CSS中获得 translateY 的值。

这里是in-line value：

  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 。

解决方案

有多种方法。

例如：

  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 | | in | pt | pc））\）/）; 
 return zT？ zT [1]：'0'; 
 //返回值AS STRING（带单位）
} 
 // 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; 
 // ~~将值转换为数字
} 
 // getComputedTranslateZ（tabletParent）=> 0 
  

请参阅这个小提琴显示了两种方法（注意，我一直在使用chrome的测试，所以我已经为您的CSS加上 -webkit - ）。 p>

---

EDIT：

要获得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; 
} 
  

I want to get translateY value from the in-line css with the JavaScript.

Here is the in-line value:

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

These code give to me the total list in to variable:

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

console.log

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

Expecting toTop as -12358.8px.

解决方案

There are multiple ways. One of the first that come to my mind is parsing the string you get.

For example:

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'

However this will only work with translateZ explicitly defined (not translate3d nor matrix3d). A most consistent way might be getComputedStyle, but this would always get the value in px unit and thus is only truely valid at the time you compute it (a window resize can change it):

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

See this fiddle showing both methods (note that I've been using chrome for the tests, so I've prefixed your CSS with -webkit-).

---

EDIT:
To get translateY, if your visitors browser is recent enough to support getComputedStyle, you could change my getComputedTranslateZ function to handle both matrix and matrix3d values. It is simpler than trying to parse every possible css strings (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;
}

这篇关于如何获得translateX和translateY的价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！