使用jQuery获取CSS转换属性

我试图获取-webkit-transform: translateY('')属性的变量。使用jQuery获取CSS转换属性

HTML

<form class="form-con" style="-webkit-transform: translateY(-802px);"></form>

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

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

来源

2014-02-24 colmtuite

您使用的浏览器是？在Chrome中，您必须使用'.css（' - webkit-transform'）'来获取值 - 您的代码返回该函数未定义的值，以便分割失败。请谨慎使用此Chrome浏览器的 – Archer

跨浏览器问题。虽然杰克的回答有诀窍。 – colmtuite

你最好从'$（'。form-con'）[0] .style ['webkitTransform']获取设定值' –

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

来源

2014-02-24 12:21:46

让我总是返回 – Jonny

您可以使用：

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

来源

2014-02-24 12:24:26

'matrix [12]''和'矩阵[13]'相关？ –

@StevenPalinkas：这是在3D变换的情况下，定义了4 * 4大小的矩阵。检查文档中的第三个属性在这里https://www.w3schools.com/cssref/css3_pr_transform.asp –

它是否有意义之间的差异'-moz-transform'，'-ms-transform'等，因为所有浏览器都是兼容'旋转（nnn度）'？ – Jonny

我想答案is here：

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; 
}

来源

2015-04-30 08:35:52

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

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);

来源

2017-03-05 15:34:45 kamiyam

使用jQuery获取CSS转换属性

回答

相关问题