Handling CSS with JQuery

1. Modify class at runtime

1.1. If an element has multiple classes attached and you need to remove one of class (say 'oldclass') $(selector).removeClass("oldclass")

1.2. If you want to add a new class to an element (say 'newclass')
$(selector).addClass('newclass')

1.3. If you want to replace one of the class associated with element (say replace 'oldclass' with 'newclass') $(selector).removeClass('oldclass').addclass('newclass')

1.4. If you want to replace all classes with a different class
$(selector).attr('class','newclass') // with this one

2. Notes on using multiple classes.

2.1. If you want to specify multiple classes to an element, separate them with space.
<div class="class1 class2 class3"></div>
OR $('div').addClass('classA classB')
OR $('div').addClass('classA').addClass('classB')

2.2. More than the sequence in which classes are specified in an element, priority is more driven by class appearance in css. For example, consider following:

<style>
.fancy2 {
color:'#ffffff';
background-color:'black';
text-decoration:underline;
}
.fancy {
font-size:19px;
color:orange;
background-color:'blue';
}

</style> <div class="fancy fancy2">Lorem Ipsum</div>
<div class="fancy2 fancy">Lorem Ipsum</div>

For either div, settings will be applied by merging fancy and fancy2 while picking values appearing later in css for common properties. Therefore, both div will have following properties when rendered:
font-size:19px //picked from fancy
color:orange //picked from fancy as it appears after fancy2 in css
background-color:blue //picked from fancy as it appears after fancy2 in css
text-decoration:underline //picked from fancy

3. Using functions to set class If you need to specify class based on some logic, the same can directly be wired while setting css. For example, if(i=1) set 'Class1' otherwise 'Class0' then:
$('div').addClass(function(){return (i==1)? 'class1':'class2'})

4. Alter css property using JQuery - ummm U Can't!
Quiz:
Let's say there is a class 'abc'
.abc { color : 'red' }
and an element with that class
<div id='div1' class='abc'>Lorum Ipsum</div>
Now, what if following is executed in $(document).Ready():
$('.abc').css('color':'yellow')
What color will be displayed for text eventually?
You said "Yellow"? Correct!
Now, What if following line is executed?
$('#div1').removeClass('abc') ??
You said, "No color will be applied"?? ahm!
This time you are likely wrong. You would still see yellow color.
Reason:
When $('abc').css('color','yellow') was applied, an inline property of color=yellow was applied to all elements. when you remove css, that inline property was still there. Hence, yellow!

5. toggleClass('classname') - A sweet shortcut
Everytime ToggleClass('classname') is called on an element, it adds specified class to it (if specified class is not set for element) or otherwise remove that clas (if already set). Hence every alternate call toggles the class.
e.g. css: <style>.abc {color:'red')</style>
element: <div>abc</abc>
jquery: $('div').click(function() {$(this).toggleClass('abc'));
Everytime div is clicked, its class toggles.

6. properties with hyphens like background-color OR text-decoration can be set through .css() function only if they are in quotes. You can also have them as camelcased.
$('div').css(background-color,'yellow') //won't work
$('div').css('background-color','yellow') //works
$('div').css(backgroundColor,'yellow') //works

CodeProject