What I aim to accomplish:
I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery.
Reason behind this goal:
I am in the process of creating a color scheme editor where changes made by the user should be reflected in the CSS.
Methods attempted:
I have tried replacing the entire <style> tag with CSS generated by a JavaScript function. While it works, it seems like an excessive amount of processing for minor changes.
Another approach involves creating container <div>s that hold specific CSS classes and then finding/replacing their HTML code. See example below:
<div id="button_background_cont">
<style type="text/css">.buttons {background-color:#333333;}</style>
</div>
<div id="button_color_cont">
<style type="text/css">.buttons {color:#ffffff;}</style>
</div>
Both methods work but are cumbersome and not quite to my liking.
Illustration of desired outcome:
<style type="text/css" id="color_scheme">
.buttons {background:#333333; color:#ffffff;}
</style>
<input name="button_background" id="button_background" value="#333333" />
<input name="button_color" id="button_color" value="#ffffff" />
Transform the form elements as follows
<style type="text/css" id="color_scheme">
.buttons {background:#ff0000; color:#333333;}
</style>
<input name="button_background" id="button_background" value="#ff0000" />
<input name="button_color" id="button_color" value="#333333" />
Any suggestions?