How do I add a css class to an Div element in JQuery?

Question

How do I add a css class to an Div element in JQuery? I have a DIV with a css class and the div contains a form. After clicking on submit I want the original css class to disappear and a new class to be added? I'm using JQuery as a Framework

Answer 1

To add a class, use addClass:

$('#myDiv').addClass("blah");

So upon your submit you can do something like:

$('#submit').click(function() {
    $('#myDiv').removeClass().addClass("blah");
});

Calling removeClass with no parameters removes all classes linked to that element. Alternatively, you can call removeAttr("style")

Answer 2

$("#element_id").removeClass( "oldclass").addClass("newclass");

Answer 3

Since OP didn't mention any ids I would go with a class selector and picking the first element in collection (which could be wrong, offcourse).

$(".OriginalClass").removeClass("OriginalClass").addClass("blah");

The original example was wrong, as the elements in the collection are regular objects and as such they don't have the removeClass and addClass methods.

The current example removes the class for all elements, which is still flawed, but in my opinion works better with what OP wanted.

Answer 4

I think you can use

$("#target").addClass("newclass");

for adding the class to the elemet #target and

$("#target").removeClass("newclass");

to remove it.

If you dont know wether the class is already there or not you can use

$("#target").toggleClass("newclass");

if its there, it will be removed, and if its not there it will be added.