Dönüştürme css değerini doğrudan kullanarak jquery

Question

alıyorum element.style[vendor + 'Transform'] yapıyor. Şimdi benim uygulamada kullanmak için -283.589px değerini ayıklamak istiyorum ama almak için tam yol almak değil. console.log($('.slide').css("-moz-transform")) yaparsam, matris değerini matrix(1, 0, 0, 1, -283.589px, 0px) olarak döndürür. -283.589px değerini doğrudan almak için jquery'de uygun bir yol var mı? Herhangi bir matris hesaplaması yapmak istemiyorum.

Answer 1

İyi haberlerim ve kötü haberlerim var.

Kötü haberle başlayacağım: jQuery'nin döndürdüğü nesneyi inceledikten sonra, matrix nesnesi bir dizgeden başka bir şey değildir ve başka bir nesneyi ancak bir dizeyi elde etmenin kesinlikle hiçbir yolu yoktur. Diyelim ki bir dizge olmamalıdır: CSS değerleri dizgidir, dolayısıyla jQuery dizeleri döndürür.

İster beğenilsin ister beğenmesin, değeri almak için dizgiyi gerçekten ayrıştırmalısın. İyi haber şu: İki çözümüm var.

Şimdi, ilk değer çiftinin ALWAYS olduğundan emin olursanız, yalnızca alt dizeyi kullanabilirsiniz. Ancak, bir sonraki sorun: Google Chrome’da -283.589px değeri -283.5889892578125 olarak değiştiriliyor.

Doğru değeri elde etmek için daha gelişmiş bir dizge ayrıştırıcısına ihtiyacınız var. Düzenli ifade edilir:

var matrix = $('.selector').css('-moz-transform'); 
var values = matrix.match(/-?[\d\.]+/g); 

Bu, dizenin tüm değerlerini alır.

sağ dizini seçerek, senin değerini elde edebilirsiniz:

Ben sağlayabilir iyi çözüm olduğunu ve bunu mümkün olan tek çözüm olduğunu eminim

var x = values[5]; 

. var matrix = $('.selector').css('-moz-transform'); kullanılarak

Answer 2

,

matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/); 

Kim {0, 1, 2, dizin, giriş} olan bir nesne verecek

[1] = X, [2] y-

Answer 3

= Sürekli olarak jQuery'yi TweenMax ile birlikte kullanmam gerektiğinden ve TweenMax zaten çeşitli dönüşüm dizilerinin ve uyumluluk sorunlarının tüm ayrıştırma işlemlerini halleddiğinden beri, here (daha fazla gsap'ın bir sargısı) küçük bir jQuery eklentisi yazdım. bu değere doğrudan eriş Böyle s:

$('#ele').transform('rotationX') // returns 0 
$('#ele').transform('x')   // returns value of translate-x 

özelliklerinin listesi başlangıçtaki özellikleriyle birlikte/set alabilir: jQuery yalnız bunu yapamaz iken

perspective: 0 
rotation: 0 
rotationX: 0 
rotationY: 0 
scaleX: 1 
scaleY: 1 
scaleZ: 1 
skewX: 0 
skewY: 0 
x: 0 
y: 0 
z: 0 
zOrigin: 0 

Answer 4

, bir Regex yöntemi daha iyi olurdu.Aşağıdaki kodu parseComplexStyleProperty işlevleri ise
, örneğin, bir elementin style niteliğini olan bir dize alır ve anahtarları ve değerleri bir Nesne bölünür:

function parseComplexStyleProperty(str){ 
 
    var regex = /(\w+)\((.+?)\)/g, 
 
     transform = {}, 
 
     match; 
 

 
    while(match = regex.exec(str)) 
 
     transform[match[1]] = match[2]; 
 
    
 
    return transform; 
 
} 
 

 
////////////////////////////////////////// 
 

 
var dummyString = $('something').attr('style'), 
 
    transformObj = parseComplexStyleProperty(dummyString); 
 

 

 
console.log(dummyString, transformObj)