jQuery Tutorials
jQuery Introduction
jQuery Get Started
jQuery Syntax
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering
jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post
jQuery Misc
jQuery noConflict()
jQuery Filters
Previous
jQuery - Get and Set CSS Classes
With jQuery, it's easy to trick the style of the elements.
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass()- Adds one or more classes to the selected elementsremoveClass()- Removes one or more classes from the selected elementstoggleClass()- Toggles between adding/removing classes from the selected elementscss()- Sets or returns the style attribute
Example Stylesheet
The following style sheet will be used for all the examples on this page:
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
jQuery addClass() Method
The following example shows how to add class attributes to different elements. Yes you can select multiple elements, when adding classes:
Example
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
You can also specify multiple classes within the addClass() method:
Example
$("#div1").addClass("important blue");
});
jQuery removeClass() Method
The following example illustrates how to remove a class attribute from different elements:
Example
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() Method
The following example will show how to use the jQuery toggleClass() method. This method changes between adding / removing classes from selected items:
Example
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Method
The jQuery css() method will be explained in the next chapter.