Add/Modify CSS in a <style> tag on with jQuery/javascript -

what want do:

i want add rules , modify existing rules inside of <style> tag javascript/jquery.

why want it:

i'm building color scheme editor , when user changes value in form, want update css reflect change.

what i've tried:

replacing entire <style> tag css generated js function. works seems lot of processing small change.

also can create container <div>s contain specific css classes , find/replace html. exmaple 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> 

these both work... clunky , don't particularly them.

example of need do:

<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" /> 

change form elements , make following

<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 ideas?

this basic way of doing it, perhaps find better way generate styles string, this:

    function generatestylescontent(){         var btnbgr = $("#button_background").val();         var btncolor = $("#button_color").val();         var stylesplaceholder = ".buttons{background:[background];color:[color];}";          var newgeneratedstyles = stylesplaceholder                                  .replace("[background]", btnbgr)                                  .replace("[color]", btncolor)              $('#color_scheme').text(newgeneratedstyles);     };      $('.buttons').on('click', function(){         generatestylescontent();         }) 

jsfiddle

updated