Delphinidin

CSS and jQuery feel like they are meant to work together. I often wonder how I survived so long without using jQuery, especially when working so extensively with CSS. Up until this point, I have been using the .css() method to add CSS properties to HTML elements on the page in most of my examples. Th e downside to using the .css() method is that it adds inline styles to the HTML. If you would prefer to keep the code cleaner, I would suggest adding and removing classes instead.

Commonly Used CSS Methods and Their Abilities:

.css() : Can retrieve or add CSS properties to any element
.addClass() : Can add a CSS class to any element
.hasClass() : Can test if an element has a class
.removeClass() : Can remove a CSS class from any element
.toggleClass() : Can add and remove CSS classes from any element

- Adding CSS to a DOM Element
If you've been working through this chapter in order, you should be familiar by now with adding CSS to any element in the DOM because I have been using the css() method in all of my code examples. It is a useful method, especially if you are testing layout and would like to add borders to all of your elements.

$('.container').css('border','1px dashed #111');

- Adding a Class to a DOM Element
If you would like to add a class to an existing DOM element, you can use the addClass() method. Th is method works by passing the name of the class that you would like to add into the parentheses aft er the addClass. When you're adding the class name, you do not need to include the period.

$('.container').addClass('active');

If the DOM element you are adding a class to already has a class, the additional class will be added after it. If you wish to pass multiple classes to a matched set, just make sure you list each class separated by a space.

$('.container').addClass('active paper');

You are not limited to adding classes by selecting classes. You can also add classes to ID and other HTML tags.

$('#page-wrap').addClass('alternate');

- Removing a Class from a DOM Element
You also need to learn how to remove a class from an element. It works in the same way, but the method name changes from addClass() to removeClass().

$('#page-wrap').removeClass('alternate');

If no class name is passed into the method, any class in that matched set is removed.

$('#page-wrap').removeClass();

You can also remove multiple classes by adding them one after another into the method, each one separated by spaces.

$('#page-wrap').removeClass('alternate main product');

- Toggling a Class on a DOM Element
Toggling is the act of turning something on or off . The toggleClass() method is useful when you're working with dynamic Web applications where you may not always know the on/off state that an element is in. In the following example, I toggle the class .alternate on the #page-wrap div. If the class does not exist, it is added, and vice versa.

$('#page-wrap').toggleClass('alternate');