添加/修改CSS中的CSS <style> tag on with jQuery/javascript

Question

What I want to do:

I want to add rules and modify existing rules inside of a <style> tag with javascript/jQuery.

Why I want to do it:

I'm basically building a color scheme editor and when the user changes a value in the form, I want to update the CSS to reflect this change.

What I've Tried:

Replacing the entire <style> tag with CSS generated by a JS function. This works but seems like a lot of processing for a very small change.

Also I can create container <div> s that contain specific CSS classes and simply find/replace their 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... but are really clunky and I don't particularly like them.

Example Of What I Need To 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 The form elements and make it the 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?

Answer 1

This would be a basic way of doing it, you could perhaps find a better way to generate styles string, but it would look something like 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

Answer 2

你可以用以下方式使用j-query来做到这一点

$("#button_background").css("color",'blue')

Answer 3

While you can do that there is easier ways to do (check here and here ), for example: using the class selector you can filter all objects that have the "old" class $( ".oldClass" ) and manipulate what classes they have (instead editing the class) :

filter and add the new class

$( ".oldClass" ).addClass(".newClass")

and remove the old class

$( ".oldClass" ).removeClass(".oldClass")

you can also use .css to change a property :

$( ".oldClass" ).css("background","#ff0000")