How to override a class using jquery

Question

All,

A class jquery css class sets the following .

 .newwidget { border: 1px solid #5a9ee9; background: #5a9ee9 url(t6.gif) 50% 50% repeat-x; color: #ffffff; font-weight: bold; text-transform: uppercase; padding:3px 3px 3px 10px; font-size:10px}

How to override this class and add a new class so that i can put different styles in it.May be i have to remove and add class.How is this done.

Thanks..

Answer 1

Use the class selector with addClass and removeClass.

$('.newwidget').removeClass('newwidget').addClass('newerwidget');

Answer 2

You can to remove the old class and add a new one:

$myJQObject.removeClass('newwidget').addClass('newclass');

Answer 3

jQuery defines addClass() and removeClass() for just this purpose:

$("#ElementId").removeClass('oldClassName').addClass('newClassName');

The two function do the obvious. Chain them like this to change the class all in one action.

If you would like to change all elements from 'oldClass' to 'newClass', you can use a selector like this:

$(".oldClassName").removeClass('oldClassName').addClass('newClassName');

Answer 4

$(this).removeClass('oldClass').addClass('newClass');