How to dynamically change CSS class of DIV tag?

Question

I am using JavaScript. I have a variable var boolVal that either evaluates to true/false. On my page, I have a div tag.

<

Answer 1

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