css3 - Javascript - getting element box-shadow details accurately -

i have come bit unstuck..

well near enough every css property has seperate parts ie.

margin-left border-top-color transition-duration 

however, have searched around bit , seem's me not case box-shadow. example have 4 <input>'s, h spread & v spread & blur & color. , wan't change elements box shadow on change of these fields. after finding out there isn't specifics on box shadow, decided best way split box-shadow array using this

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

however result not come in right order shown in fiddle

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

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

the color different , order has changed doesn't sound reliable me.

is there way can acuratelly get/set different sections of box-shadow

i using zepto.js if there solution there.

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

i hope toward goal. made regex, matches browser outputting (the rgb hex rgb). may need updated since didn't test in browsers, think converts rgb if there alpha, can handled easily.

here's fiddle: http://jsfiddle.net/hq7nf/2/

and here's regex using:

var reboxshadow = /(?:rgb\((\d+), ?(\d+), ?(\d+)\)([^,]*))+/g; while ( style = reboxshadow.exex(element.style.boxshadow) ) {     /* stuff happens */ } 

i split color , args separate variables, can decide them. hope can @ least on right track.