CODEWITHSUNDEEP
javascripthtmlcss
variable
variable

Reputation: 9736

How to dynamically change CSS class of an HTML 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?

Upvotes: 31

Views: 140314

Answers (6)

T J
T J

Reputation: 43166

You can add a CSS class based on id dynamically using classList API as follows:

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

Or the old way:

document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes

Alternatively you can use other DOM query methods shown below 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 (similar to the example given below each).

In your case

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

Upvotes: 55

Ishan Jain
Ishan Jain

Reputation: 8171

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

Upvotes: 7

Suman Bogati
Suman Bogati

Reputation: 6351

Use

document.getElementById('div1').className='blueClass';

Upvotes: 1

Norbert Pisz
Norbert Pisz

Reputation: 3440

You should use:

    boolVal.onchange=function(){
                document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";
    };

Upvotes: 0

dfsq
dfsq

Reputation: 193301

Something like this:

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

Upvotes: 3

Scott
Scott

Reputation: 2793

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.

Upvotes: 0

Related Questions