How to change a css class style through Javascript?

Question

According to the book I am reading it is better to change CSS by class when you are using Javascript. But how? Can someone give a sample snippet for this?

Answer 1

Suppose you have:

<div id="mydiv" class="oldclass">text</div> 

and the following styles:

.oldclass { color: blue } .newclass { background-color: yellow } 

You can change the class on mydiv in javascript like this:

document.getElementById('mydiv').className = 'newclass'; 

After the DOM manipulation you will be left with:

<div id="mydiv" class="newclass">text</div> 

If you want to add a new css class without removing the old one, you can append to it:

document.getElementById('mydiv').className += ' newClass'; 

This will result in:

<div id="mydiv" class="oldclass newclass">text</div> 

Answer 2

Since classList is supported in all major browsers and jQuery drops support for IE<9 (in 2.x branch as Stormblack points in the comment), considering this HTML

<div id="mydiv" class="oldclass">text</div> 

you can comfortably use this syntax:

document.getElementById('mydiv').classList.add("newClass"); 

This will also result in:

<div id="mydiv" class="oldclass newclass">text</div> 

plus you can also use remove, toggle, contains methods.