Getting value of individual box-shadow when set to multiple values

Question

Trying to get an answer to a recent question, I tried to parse the box-shadow of an element, that had been set as

div {
    box-shadow: 0 0 0 5px green, 0 0 0 10px #ff0000,  0 0 0 15px blue;    
}

I expected to get that string, do an split(",") on it, and get the array of box-shadows. (with 3 elements)

My problem is that I get the string as

"rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px"

And of course when I split that I get a mess.

Is there an easier way to get the values of the individual box-shadows ?

Answer 1

you can try three separate statments

document.getElementById('the-element-id').style['boxShadow']

or do the split but use "px, " as the separator and add the "px" back to all values of the array except the last one

var string ="rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px";

var array= string.split("px, ");
var length = array.length;
for (var i=0; i<length; i++) {
    if (i != length - 1){
        array[i] = array[i] + "px";
    }
    console.log(array[i]);
}

jsFiddle

[EDIT]

I just realized this won't work if the last value of the box shadow is 0 (ie 15px 0 0 0, rgb)

here's the alternative in that case split on ", rgb" and add "rgb" back to all the values of the array except the first one:

var string ="rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px";

var array= string.split(", rgb");
for (var i=0; i<array.length; i++) {
    if (i != 0 ){
        array[i] = "rgb" + array[i];
    }
    console.log(array[i]);
}

jsFiddle