使用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轉換屬性

回答

相關問題