JQuery selettore comune CSS

Question

ho:

<div class="abc" style="transform : [stuff]"></div> 
which displays in chrome as 
<div class="abc" style="-webkit-transform : [stuff]"></div> 

quindi voglio afferrare [stuff] da entrambi questi con un unico selettore.

$(".abc").css('whatcomeshere?') 

C'è qualcosa come regex che posso usare qui? Qualche altro metodo? Immagino che ci sarebbe un metodo semplice in quanto trattare con cose del genere sarebbe normale in JQuery.

EDIT: PRECISAZIONE

Non sto cercando di metodi per recuperare l'angolo o un elemento dalla matrice trasformare.

Sto semplicemente alla ricerca di un selettore che recuperare sia transform e -webkit-transform stili $(".abc").css('transform') non funziona per entrambi.

Answer 1

Modifica come dal tuo commento qui sotto dicendo che questo non ha funzionato per te con la tua versione di jQuery e Chrome.

Si può sempre ripiegare alla proprietà style sull'elemento:

var abc = $(".abc")[0]; 
var transform = abc.style.transform || abc.style.webkitTransform; 

Live Example

Per me, con la mia versione di Chrome su Linux a 64 bit, abc.style.transform rendimenti undefined (che ha un senso , Ho impostato solo la versione con prefisso del fornitore) e abc.style.webkitTransform restituisce le informazioni sullo stile. Quindi quanto sopra restituirebbe il primo che non era undefined.

---

$(".abc").css("transform") dovrebbe tornare a voi, jQuery normalizza prefissi vendor.

Here's a live example utilizza questo div:

<div class="abc" style="-webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 60% 100%;">foo</div> 

E questo codice:

jQuery(function($) { 
    display("$('.abc').css('transform') = " + $(".abc").css("transform")); 
    display("$('.abc').css('-webkit-transform') = " + $(".abc").css("-webkit-transform")); 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
}); 

quali uscite (su Chrome):

$('.abc').css('transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0) 

$('.abc').css('-webkit-transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

Nota che ho solo la versione prefisso su il div, ma css fornisce e le stesse informazioni per transform e -webkit-transform.

Answer 2

Se si desidera un prefisso specifico fornitore, tanto per essere espliciti:

$(".abc").css('-webkit-transform'); 

Nella maggior parte dei casi, a meno che non hai specificamente aggiunto diverse funzionalità per fornitori specifici, la proprietà css generica dovrebbe darvi il valore desiderato.

Answer 3

jQuery si occupa delle proprietà con prefisso del fornitore quando si esegue $('.abc').css('transform').

Dal source code:

cssPrefixes = [ "Webkit", "O", "Moz", "ms" ]; 

// return a css property mapped to a potentially vendor prefixed property 
function vendorPropName(style, name) { 

    // shortcut for names that are not vendor prefixed 
    if (name in style) { 
     return name; 
    } 

    // check for vendor prefixed names 
    var capName = name.charAt(0).toUpperCase() + name.slice(1), 
     origName = name, 
     i = cssPrefixes.length; 

    while (i--) { 
     name = cssPrefixes[ i ] + capName; 
     if (name in style) { 
      return name; 
     } 
    } 

    return origName; 
}