Web Development with jQuery

Chapter 6CSS

When working with CSS from JavaScript, a few minor points of verbosity and inconsistency exist where jQuery can lend a helping hand. jQuery makes it easier to manipulate CSS from JavaScript. jQuery's approach enables you to define styles for multiple CSS properties at once, or one CSS property at a time. But instead of setting CSS properties one element at a time, you can set the style on one or many elements at once.

As mentioned in Chapter 4, “Manipulating Content and Attributes,” and in Chapter 1, “Introduction to jQuery,” it's generally good practice to avoid mixing style (CSS) with behavior (JavaScript) and structure (HTML). You want to keep CSS, JavaScript, and HTML partitioned as cleanly as possible into their respective documents.

In some cases, however, it is unavoidable to bring presentation into your JavaScript programming; for example, it may have already been done the wrong or more-difficult-to-maintain way long before you ever arrived. In these cases, the style changes dynamically in such a way that it is impractical and unreasonable to keep CSS only in a style sheet and not directly modify style with JavaScript programming. This chapter covers the methods that jQuery exposes that enable you to work with style-sheet properties and values.

Working with CSS Properties

Instead of messing around with the style property as you may be used to doing with traditional JavaScript, when you want to access style information or modify style information with jQuery, ...