Is it possible to change inner css from java script?

Question

We have jquery menu in application, and on selecting of particular element; its background color gets change.

Color is changing according to css. We are designing "Theme" and are trying to change color of css dynamically using Javascript, so that on selecting menu; its color will be changed. But, we are not getting well way to do it.

Following is the css: -

.mmenu li.mmenu-selected > a
{
    background: #1971AA;
    color:#FFFFFF;
    font-weight: normal;
}

Create a class in your CSS, and use jQuery's addClass() method to assign it to the elements you require. — Rory McCrossan
– Rory McCrossan, Commented Jun 29, 2015 at 10:32
Stylesheets can be dynamically manipulated - but this is not the appropriate method for this, — user2864740
– user2864740, Commented Jun 29, 2015 at 10:44

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-29 10:36:05Z

1

If you have a fixed number of values for the background, then use classes like this:

.theme1 .mmenu li.mmenu-selected > a {background-color: #f99;}
.theme2 .mmenu li.mmenu-selected > a {background-color: #ff9;}
.theme3 .mmenu li.mmenu-selected > a {background-color: #fff;}

If not, use inline styles, targetting the parent and giving an inherit:

$(".mmenu").css("background-color", "#ff9");

And in the CSS:

.mmenu li.mmenu-selected > a {background-color: inherit;}

answered Jun 29, 2015 at 10:36

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

3 Comments

Worldprogram Over a year ago

Kindly correct me, if I am wrong.Theme 1 to 3, we will define in some css file and on selecting of particular theme, we will load it. And because of inherit property; it would work fine for all selected menu item.But, How will we load into memory?

Worldprogram Over a year ago

But, How will we load into memory?

Praveen Kumar Purushothaman Over a year ago

@Worldprogram Add it into CSS file.

Siamak Ferdos · Accepted Answer · 2015-06-29 10:37:20Z

0

Try css method:

$(".mmenu li.mmenu-selected > a").css({"background": "#1971AA", "color":"#FFFFFF"});

answered Jun 29, 2015 at 10:37

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

1 Comment

user2864740 Over a year ago

Note: sets css style on the selected elements; does not change the stylesheet. Also not very 'clean' in terms of adding style decorations.

Collectives™ on Stack Overflow

Is it possible to change inner css from java script?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related