使用jQuery获取CSS转换属性

我试图在变量中获取-webkit-transform: translateY('')属性。

HTML

JS

 $('.foo').click(function() { var current_pull = parseInt($('.form-con').css('transform').split(',')[4]); }); 

这返回’0’，而不是正确的值。

Answer 1

 $('.foo').click(function() { var current_pull = parseInt($('.form-con').css('transform').split(',')[5]); }); 

Answer 2

您可以使用：

  var obj = $('.form-con'); var transformMatrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(','); var x = matrix[12] || matrix[4];//translate x var y = matrix[13] || matrix[5];//translate y 

Answer 3

我想答案就在这里 ：

 function getRotationDegrees(obj) { var matrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(matrix !== 'none') { var values = matrix.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); } else { var angle = 0; } //return (angle < 0) ? angle + 360 : angle; return angle; } 

Answer 4

我认为属性的顺序是不确定的。

 var matrix = $obj.css('transform'); var translate = {}; // translateX var matchX = matrix.match(/translateX\((-?\d+\.?\d*px)\)/); if(matchX) { translate.x = matchX[1]; } // translateY var matchY = matrix.match(/translateY\((-?\d+\.?\d*px)\)/); if(matchY) { translate.y = matchY[1]; } console.log(translate);