CODEWITHSUNDEEP
jquery
Vicky
Vicky

Reputation: 9585

how to add and remove css class

how to remove CSS default 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 default class and new css class

Please help;

Upvotes: 3

Views: 4901

Answers (5)

JoeTidee
JoeTidee

Reputation: 26054

For IE10 and up use these 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");

Upvotes: 1

John Boker
John Boker

Reputation: 83709

You are not defining a css class in your example, you are using the selector for the id.

to use a class your code would be like:

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

and in your stylesheet or between style tags you would have

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

then, using jquery you could remove this class by doing

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

Upvotes: 2

Doug Neiner
Doug Neiner

Reputation: 66191

You can approach it two ways. One, use two classes and literally swap them out 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 toggle a single class:

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

Then:

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

That would alternate backgrounds every time it was called.

Upvotes: 3

Sampson
Sampson

Reputation: 268344

You aren't dealing with a class. You have default rules applied to the ID element. As such, you should really only need to add the new class:

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

Any rules that aren't overwritten can be overwritten with the css() method:

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

Upvotes: 4

Michael Shnitzer
Michael Shnitzer

Reputation: 2505

Try to add a period before your css class definition.

Using your example above you should use:

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

Upvotes: 0

Related Questions