jQuery obteniendo text-shadow variabile

Question

Quiero obtener 4 variables cuando hago clic en un span que tiene la propiedad text-shadow de CSS3. Así que para una propiedad CSS de text-shadow: -4px 11px 8px rgb(30, 43, 2);, mi código debería ser:

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

¿Sería posible conseguir que se divide así:

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

necesito dividir de alguna manera la primera variable para obtener estos datos.

Gracias

Answer 1

Debe utilizar expresiones regulares para dividir el resultado de jQuery CSS en las variables que se estan buscando.

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

Esto devolver una matriz dividiendo el valor text-shadow cadena en números con los píxeles y los valores RGB. Se le puede ayudar en este caso en particular, pero probablemente tenga que trabajar en ello un poco más para conseguir que funcione para todos los posibles casos de text-shadow

NOTA: El valorrgb(...) es el primer partido de la matriz porque así es como lo devuelven Firefox, Chrome, Safari y Opera, independientemente de cómo lo asigne. IE podría hacerlo de manera diferente.

Answer 2

manera obvia sería:

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

Como yo no creo que haya una manera de extraer a cabo cada valor de la CSS de forma individual, la forma más fácil de hacerlo sería a haz algo de manipulación de cuerdas Y puesto que el valor devuelto es en este orden: el color, y, x, falta de definición, que terminarías con este 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];