jQuery library allows the designers and developers to rapidly implement elegant design features resulting in interactive website. Cross browser compatibility, CSS3 selectors, plugins and inbuilt functions for common actions are the main features of jQuery. The jQuery UI library is built to support the core library for quickly adding customizable widgets. On top of it, there are thousands of useful plugins. No wonder, the web giants like Google, Amazon, Digg and WordPress are using jQuery.
Reading CSS Properties
Before we start adding and modifying the CSS properties, let’s begin with reading the CSS properties.
The above lines of code alert the font size of the DOM element having ID “findMyFontSize”. There can be multiple classes applicable to the element and all may have different font sizes. The beauty of jQuery is that it returns the style values as calculated by browser. This means that you will receive the value rendered in the browser and that might be different from the value entered in the CSS definition. The passed and the rendered values are at times different primarily because of class definitions in the browser default user-agent style sheet.
Browser Inconsistencies in Reading CSS properties
The .css() method of jQuery takes into account the differences in DOM implementation by different browsers. So, selecting a left floated <div>, whether float, cssFloat or styleFloat is passed to the .css(), will return ‘left’. Thus, jQuery treats the three values as synonyms and takes away the pain of handling browser inconsistencies.
On slightly different note, different browsers may return logically the same value for background color, but jQuery still supports two ways to read the background color.
The background-color is the CSS name and the backgroundColor is the DOM name.
jQuery, however, doesn’t allow use of shorthand CSS properties like margin, border and background in the .css() method. You need to request individual properties like margin-left, border-left-width, and background-color.
Setting and Modifying CSS Properties
The same .css() method of jQuery permits you to add the value of the CSS property as the second parameter. So, in the basic font size example, you can set the font size to 12px, simply by passing it as second argument in the method.
Multiple CSS properties can be passed to single .css method in the form of a comma separated key-value object.
The .css() method modifies the style property of the element, so the above example used to set font-size is equivalent to
Adding and Removing CSS Classes
The .css() method allows you to quickly change the CSS properties. This lets you to modify the style attribute of each selected element. But, overuse of the practice mixes the content with presentation and thus, is not a good design example. The above scenario can be equated to writing the entire style attributes in the DOM element. The purpose of having stylesheets and styling classes gets defeated.
jQuery provides the solution to help you keep your code clean and maintainable. The CSS classes can be applied or removed from any DOM element as quickly as a single CSS property. This keeps the content separated from the presentation.
jQuery provides three methods to add, remove and toggle CSS classes. The methods are .addClass(), .removeClass() and .toggleClass(). The .addClass() method dynamically adds one or more classes to the selected element (/s). Similarly, .removeClass() removes the CSS class and .toggleClass() toggles between the classes applied to the selected element or set of elements.
Multiple classes can be passed to any three of the above functions by separating the class name with a space. To check the presence of a class on any element in the selection, you can also use .hasClass(className).