How can i set multiple CSS class from JavaScript

Question

I have the following

CSS:

.a { position: absolute; }    
.a .b { color: red }    
.a .c { color: green }

How can i set the ".a .b" class for element with Java Script?

There is no class called .a .b. That CSS would only apply to elements with a class of b that are inside elements with a class of a. — Paulie_D
– Paulie_D, Commented Feb 20, 2015 at 11:55

Community · Accepted Answer · 2017-05-23 12:06:30Z

5

Via className property:

var element = document.getElementById('myelement');
element.className = 'a b';

However, as mentioned by @dfsq in the comments, you probably have to fix your CSS rules to set classes for the same element rather than for its descendants, e.g. .a.b { color: red; }.

DOC: https://developer.mozilla.org/en-US/docs/Web/API/Element.className

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 20, 2015 at 11:50

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

2 Comments

dfsq Over a year ago

According to OP's CSS a and b are supposed to be on different elements. Probably CSS rules are not correct.

d.k. Over a year ago

Like this? .в, .с { position: absolute } .b { color: red } .c { color: green }

Collectives™ on Stack Overflow

How can i set multiple CSS class from JavaScript

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related