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?

Answers:

Answer

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

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

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

Answer

Something like this:

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

Use

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

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.

Answer

You should use:

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.