How to dynamically change CSS class of DIV tag?

You can add a css class based on id dynamically as follows:

document.getElementById('idOfElement').className = 'newClassName';

or using classList

document.getElementById('idOfElement').classList.add('newClassName');

Alternatively you can use other DOM methods like

• querySelector
• querySelectorAll
• getElementsByClassName
• getElementsByTagName

etc to find elements. The last three return a collection so you'll have to iterate over it and apply the class to each element in the collection.

---

In your case

var element = document.getElementById('div1');
if(boolVal)
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
   element.className= 'redClass';

First of all, AddClass is not a pure Javascript method. It's related to jQuery.

You can use Javascript for adding a class:

setAttribute and className both method are used to set class (class attribute), these method are not used to adding another class with existing one.

document.getElementById('div1').setAttribute( "class", "blueClass" );

OR

document.getElementById('div1').className="redClass";

Demo Fiddle

So if you want append a css class to an element, you can do it like this -

 document.getElementById('div1').setAttribute( "class", document.getElementById('div1').getAttribute('class') + " blueClass" );

OR

 document.getElementById('div1').className +=" redClass";

Note: Using this way, the same class can be added multiple times. It's only a trick to do this work using javascript, it's not a perfect solution

OR simply use jQuery to add class -

$("#div1").addClass("blueClass");

Working Fiddle