Add/Modify CSS in a <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?

You posted "What I want to do" and "Why I want to do it", which is great! However, you should also post a "What I tried" section. — technophobia
– technophobia, Commented Jun 3, 2015 at 18:03

Slavenko Miljic · Accepted Answer · 2015-06-03 18:40:01Z

3

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

edited Jun 3, 2015 at 18:40

answered Jun 3, 2015 at 18:19

Slavenko Miljic

3,8562 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DigitalMC Over a year ago

Yeah this was my first thought. There are around 30+ options though.

Slavenko Miljic Over a year ago

Unfortunately I don't think there's a way for you to target a specific class/style property inside <style> tag to change with JS because as far as the browser is concerned, that content is only text. I'd make a separate JS function that would generate the entire style tag text/content, and you could call upon that method whenever something changes in the input field.

bhanu.cs · Accepted Answer · 2015-06-03 18:01:27Z

0

you can do it using j-query the following way

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

answered Jun 3, 2015 at 18:01

bhanu.cs

1,3751 gold badge11 silver badges25 bronze badges

1 Comment

DigitalMC Over a year ago

This will get super convoluted and will not work. I need to edit the style tag directly.

Community · Accepted Answer · 2017-05-23 12:14:28Z

0

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

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 3, 2015 at 18:10

Rod

80412 silver badges22 bronze badges

5 Comments

DigitalMC Over a year ago

I can't change classes as we are building DATA attributes based off these classes and other integrated. Those links provided are interesting thanks.

Rod Over a year ago

@DigitalMC technically .css() won't change the class itself, but will add a overriding property to all elements that have the specified class, so it will produce the same result as editing the class.

DigitalMC Over a year ago

True, but it gets deeper as we have "sub-color schemes" that can overwrite the default template theme for certain pieces of content. This makes the Cascading feature of CSS super nice while adding/removing inline styles will get very arduous.

DigitalMC Over a year ago

Thanks so much for your contribution.

Daemedeor Over a year ago

@DigitalMC essentially if you add a class that has a selector level equal to or greater than, this should be a good contribution, since directly modifying the css style tag will get convoluted.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related