JQuery getting text-shadow variabile

Question

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

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

Is it possible to break it like this:

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

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

Thanx

Answer 1

You must use regex to split the jQuery css result 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 dividing the string text-shadow value into numbers with pixels and rgb values. This may help you in this particular case, but you may have to work on it to make it work for all possible cases of text-shadow

NOTE. The rgb(...) value is the first match in the array because it returns Firefox, Chrome, Safari and Opera, regardless of how you assigned it. IE can do it differently.

Answer 2

The obvious may 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 3

Since I don’t think there is a way to extract each value from CSS separately, the easiest way to do this would be to do some string manipulation. And since the return value is in the following order: color, y, x, blur, you will get 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];