apply css using jquery

Question

How to change css style for the preview page dynamically using jquery.

two dropdown with right side preview page, dropdown loaded with color, based on the selection, preview page css (bg color, font color) should change,

We have tried with below snippets, bg color is working, but font color not working.

//bg_color: this variable contain the dynamic BG color selection values
//font_color: for font color.
$("#web_preview_right_div").css({'background-color':bg_color});
$("#web_preview_right_div").css({'color':font_color});

in inspect element,

when i change dropdown, below color:rgb(255,128,0) code changing, but font color not applying.

also i added important, but it is not working.

background-color: rgb(245, 208, 169); color: rgb(255, 128, 0);

Answer 1

.parentdiv label { color:#000000; word-warp:break-word;}

my jquery snippet unable to over ride the above css color:#000000, so i just remove the color property, now problem solved, thanks to every one.

Answer 2

No need of using object in css if you are using single property.

 $("#web_preview_right_div").css('background-color',bg_color);

However you selector is same, so you can combine these two statements in one

    var font_color="red";
    $("#web_preview_right_div").css({
                                    'background-color':bg_color,
                                    'color':font_color
                                    });

Answer 3

It seems that you have missed quotes in color value.

try like this:

$("#web_preview_right_div").css({
                                'background-color': 'black',
                                'color':'red'
                                });

demo

Answer 4

You can do that in 1 row

$("#web_preview_right_div").css({'background-color':bg_color, 'color':font_color});

Like with json