dynamic css attributes and values
I'm building a css animation builder and trying to populate a dynamic set of css attributes with dynamic values. I have sliders that set the values of attributes (font-size,color,margin-top,margin-left,etc.). Eventually I hope to make that part dynamic based on what attributes the user wants to modify. The key/values get written to a text area with a semi-colon separating each pair. Later in my process I need to re-apply the values that were written to the text area to the page element that is supposed to have those styles. I've tried making an array of the text area text and applying each k/v pair one at a time using
e = document.getElementById(theBox).value.toString();
myStyles = e.split(";");
for(var i=0;i<myStyles.length-1;i++) { attVal = myStyles[i].split(":"); $('#' + theText).css("'" + attVal[0] + "','" + attVal[1] + "'"); }
and variations there on. I've also tried applying them using something like this:
e = document.getElementById(theBox).value.toString();
myStyles = e.split(";");
applyThis = ""; for(var i=0;i<myStyles.length-1;i++) { attVal = myStyles[i].split(":"); applyThis=applyThis + "'" + attVal[0] + "':'" + attVal[1] + "',"; }
applyThis = applyThis.replace(/\n/g, "");//remove newlines in text area applyThis = applyThis.substring(0, applyThis.length - 1);//remove trailing comma $('#' + theText).css({eval(applyThis)});
I was hoping eval would let the value of the variable be seen as a string,
but at the point where eval is used in the code it compains, saying it expects a ':'
Any suggestions, up to and including scrapping the path I'm on and doing
something more efficient/better?
Thanks for any input.