jQuery getting text-shadow variabile

Question

Hi, I want to get 4 variables when I click on a span that have the CSS3 text-shadow propriety. So for a css propriety of text-shadow: -4px 11px 8px rgb(30, 43, 2);, my code should be:

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

Would it be possible to get it split like:

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

I need to somehow split the first variable to get this data.

Thanx

Answer 1

Obvious way would be:

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 2

Since I don't think there is a way to extract out each value from the CSS individually, the easiest way to do it would be to do some string manipulation. And since the value returned is in this order: color, y, x, blur, you'd end up with this 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];

Answer 3

You should use regular expression to split the result of jQuery css into the variables you are looking for.

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

This will return an array splitting the text-shadow string value into numbers with pixels and rgb values. It can help you in this particular case, but you'll probably need to work on it some more to get it working for all the possible cases of text-shadow

NOTE: The rgb(...) value is the first match in the array because, that is the way Firefox and Chrome returns it, independently of how you assign it. IE, Opera and Safari, might do it differently.