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

you can try .css method .. like $('something').css("color",'#333'); — Fisherman
– Fisherman, Commented Mar 18, 2014 at 13:06
Not need to use object in .css() if you are using a single property — Ankur Aggarwal
– Ankur Aggarwal, Commented Mar 18, 2014 at 13:08

Awlad Liton · Accepted Answer · 2014-03-18 13:15:38Z

1

It seems that you have missed quotes in color value.

try like this:

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

demo

answered Mar 18, 2014 at 13:15

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

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

Comments

Ankur Aggarwal · Accepted Answer · 2014-03-18 13:18:54Z

1

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
                                    });

edited Mar 18, 2014 at 13:18

answered Mar 18, 2014 at 13:11

Ankur Aggarwal

3,0915 gold badges34 silver badges57 bronze badges

Comments

Tom R. · Accepted Answer · 2014-03-18 13:08:26Z

0

You can do that in 1 row

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

Like with json

answered Mar 18, 2014 at 13:08

Tom R.

1983 silver badges10 bronze badges

Comments

2 revs · Accepted Answer · 2014-03-20 03:38:39Z

0

.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.

edited Mar 20, 2014 at 3:38

community wiki

2 revs
Bharanikumar

Collectives™ on Stack Overflow

apply css using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related