jQuery get text-shadow variabile

Question

Voglio ottenere 4 variabili quando clicco su un intervallo che ha la proprietà text-shadow di CSS3. Così, per una proprietà css di text-shadow: -4px 11px 8px rgb(30, 43, 2);, il mio codice dovrebbe essere:

$("#element").click(function() { 
var text-shadow = $("#element").css("text-shadow") 
}); 

Sarebbe possibile per farlo dividere come:

var y = "-4px"; 
var x = "11px"; 
var blur = "8px"; 
color = "rgb(30, 43, 2)"; 

ho bisogno di dividere in qualche modo la prima variabile per ottenere questi dati.

Thanx

Answer 1

Si dovrebbe usare espressioni regolari per dividere il risultato di jQuery css nelle variabili stanno cercando.

var result = $('#element').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g) 
// result => ['rgb(30, 43, 2)', '-4px', '11px', '8px'] 
var color = result[0], 
    y = result[1], 
    x = result[2], 
    blur = result[3]; 

Ciò restituirà un array dividendo il valore text-shadow stringa in numeri di pixel e valori RGB. Essa può aiutare in questo caso particolare, ma probabilmente bisogno di lavorare su di esso un po 'per farlo funzionare per tutti i possibili casi di text-shadow

NOTA: Il valorergb(...) è la prima partita nella matrice perché, in questo modo, Firefox, Chrome, Safari e Opera lo restituiscono, indipendentemente da come lo si assegna. IE potrebbe farlo in modo diverso.

Answer 2

modo più ovvio sarebbe:

var properties = $('#element').css('text-shadow').split(" "); 

var y = properties[0]; 
var x = properties[1]; 
var blur = properties[3]; 
var color = properties[4] + " " + properties[5] + " " + properties[6]; 

Answer 3

Dato che io non credo che ci sia un modo per estrarre fuori ogni valore dal CSS individualmente, il modo più semplice per farlo sarebbe quello di fai qualche manipolazione di stringhe. E dal momento che il valore restituito è in questo ordine: colore, y, x, sfocatura, che ci si finisce con questo script:

var p = $('#element').css('text-shadow').split(' '); 
var color = p[0]+p[1]+p[2]; 
var y = p[3]; 
var x = p[4]; 
var blur = p[5];