How to dynamically change CSS class of DIV tag?

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

<div id='div1' class="redClass"></div>

Based on the value of var boolVal, I want to change the CSS class of the DIV tag to blueClass.

For example: Present class makes DIV color red, then the new class should make the page blue at runtime without need for page refresh.

Can we achieve this in simple javascript?

Can we use

document.getElementById("MyElement").className = "MyClass";

or should we use AddClass?



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

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

or using classList


Alternatively you can use other DOM methods like

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');
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
   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" );



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" );


 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 -


Working Fiddle


Something like this:

document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";



You can edit inline styles on a DOM element like so (height in this example):

document.getElementById("element").style.height = height + "px";

Basic syntax is:

document.getElementById("div1").style.[style property] = [value];

Syntax for the style property can vary and might not be exactly what it is in a CSS file. For example, background-color in a CSS file would be 'backgroundColor` in the above example.


You should use:

                document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.