Javascript - getting element box-shadow details accurately

Question

I have come a bit unstuck..

Well near enough every css property has seperate parts IE.

margin-left
border-top-color
transition-duration

However, I have searched around a bit and it seem's to me that this is not the case with box-shadow. For example i have 4 <input>'s, the H Spread & V Spread & Blur & Color. and i wan't to change a elements box shadow on change of these fields. After finding out that there isn't any specifics on box shadow, i decided that the best way would be to split the box-shadow into a Array using something like this

element.style.boxShadow.split(' ');

However the result does not come back in the right order as shown in this Fiddle

<div id="test" style="box-shadow: 1px 1px 3px #999;"> Welcome </div>
console.log( element.style.boxShadow.split(' ') );

Is resulting in this output ["rgb(153,", "153,", "153)", "1px", "1px", "3px"]

The color is different and the order has changed which doesn't sound very reliable to me.

Is there a way we can acuratelly get/set the different sections of a box-shadow

I am also using Zepto.js if there is a solution there.

I have tried .css(); = same result.

Answer 1

I hope this will help you get toward your goal. I made a regex, that matches what the browser is outputting (the rgb is just the hex as an rgb). It may need to be updated since I didn't test it in all browsers, but I think it converts it to rgb so if there is an alpha, that can be handled easily.

Here's the fiddle: http://jsfiddle.net/HQ7NF/2/

And here's the regex I am using:

var reBoxShadow = /(?:rgb\((\d+), ?(\d+), ?(\d+)\)([^,]*))+/g;
while ( style = reBoxShadow.exex(element.style.boxShadow) ) {
    /* this is where stuff happens */
}

I then split the color and the args into separate variables, so you can decide what to do with them. I hope that can at least get you on the right track.