1. jQuery Tutorial
2. jQuery Overview
3. jQuery Installation
4. jQuery $(document).ready()
5. jQuery Selectors
6. jQuery Traversal
7. jQuery & CSS
8. jQuery & DOM
9. jQuery & Events
10. jQuery Effects
11. jQuery AJAX
12. jQuery Deferred Objects
13. jQuery Plugins
14. jQuery - Generating a Table of Contents
15. jQuery - Creating an Expandable Tree
16. jQuery Critique

• Accessing CSS Attributes With jQuery
  • Reading CSS Properties
  • Changing CSS Properties
• Accessing CSS Classes With jQuery

With the JQuery CSS features you can manipulate the HTML element's CSS attributes and classes, and you can select HTML elements in the document based on their CSS class. In this text I will dive a bit deeper into how you do that, and explore what you can use that to achieve.

Accessing CSS Attributes With jQuery

You can both read and change the CSS properties of HTML elements using JQuery.

Reading CSS Properties

You read the CSS property of an element using the .css() method, like this:

var backgroundColor = $("#theElement").css('background-color');

Changing CSS Properties

You can change the CSS property of an HTML element with jQuery like this:

$("#theElement").css('background-color', '#00ff00');

Notice the extra parameter passed to the css() method, the '#00ff00' value. This is the value to set the CSS background-color property to.

jQuery can also change multiple CSS properties in a single call, by putting them all into a JavaScript object. Here is how that looks:

$("#theElement").css(
    {
    'background-color' : '#00ff00',
    'border'           : '1px solid #000000'
    }
    );

Accessing CSS Classes With jQuery

JQuery's CSS manipulation is not limited to CSS properties. You can also change the CSS class of an HTML element using JQuery. CSS classes are defined in a CSS stylesheet, or in a <style> element.

You add a CSS class to an HTML element with jQuery like this:

$("#theElement").addClass('theClass');

This jQuery example selects the element with the id theElement, and then adds the CSS class theClass to it.

You can add multiple classes by separating the class names with a space, in the method parameter. Like this:

$("#theElement").addClass('theClass class2 class3');

You can also toggle a CSS class with jQuery using the toggleClass() method. Toggling a CSS class means adding the class if it is not already there, or removing the class if it is. Here is an example:

$("#theElement").toggleClass('theClass');

You can also toggle multiple classes by separating each of the class names by a space, like this:

$("#theElement").toggleClass('theClass class2 class3');