How to add and remove css class

Question

how to remove the default CSS class

This is my div

<div id="messageContainer"> 

This is my css class

 #messageContainer{ height:26px; color:#FFFFFF; BACKGROUND-COLOR: #6af; VERTICAL-ALIGN: middle; TEXT-ALIGN: center; PADDING-TOP:6px; } 

I want to remove the default class and the new css class

Please, help;

Answer 1

You can approach it in two ways. One, use two classes and literally replace them for each other:

 .red { background: red } .green { background: green } 

And then in jQuery:

 $("#messageContainer").attr('class','green'); // switch to green $("#messageContainer").attr('class','red'); // switch to red 

Or you can use CSS order to switch one class:

 #messageContainer { background: red } #messageContainer.green { background: green } 

Then:

 $("#messageContainer").toggleClass("green"); 

This will alternate the background every time it has been called up.

Answer 2

You are not dealing with a class. You have default rules applied to the ID element. Thus, you really only need to add a new class:

 $("#messageContainer").addClass("newRules"); 

Any rules that are not overwritten can be overwritten using the css() method:

 $("#messageContainer").css({ 'font-weight':'bold', 'color':'#990000' }).addClass("newRules"); 

Answer 3

You do not define a css class in your example, you use a selector for an identifier.

to use the class your code will look in:

 <div id="messageContainer" class="messageContainer"></div> 

and in your stylesheet or between style tags you will have

 .messageContainer{ height:26px; color:#FFFFFF; BACKGROUND-COLOR: #6af; VERTICAL-ALIGN: middle; TEXT-ALIGN: center; PADDING-TOP:6px; } 

then using jquery you can remove this class by doing

 $('#messageContainer').removeClass('messageContainer'); 

Answer 4

Try adding a period before the css class definition.

Using the above example, you should use:

 .messageContainer{ height:26px; color:#FFFFFF; BACKGROUND-COLOR: #6af; VERTICAL-ALIGN: middle; TEXT-ALIGN: center; PADDING-TOP:6px; } 

Answer 5

For IE10 and above, use the following methods:

 // adds class "foo" to el el.classList.add("foo"); // removes class "foo" from el el.classList.remove("foo"); // toggles the class "foo" el.classList.toggle("foo");