Inline CSS modification
Before we jump into the nifty jQuery effects, a quick look at CSS is in order. In earlier chapters, we have been modifying a document's appearance by defining styles for classes in a separate stylesheet and then adding or removing those classes with jQuery. Typically, this is the preferred process for injecting CSS into HTML because it respects the stylesheet's role in dealing with the presentation of a page. However, there may be times when we need to apply styles that haven't been, or can't easily be, defined in a stylesheet. Fortunately, jQuery offers the .css()
method for such occasions.
This method acts as both a getter and a setter. To get the value of a style property, we simply pass the name of the property as a string, like .css('backgroundColor')
. Multi-word properties such as this one can be interpreted by jQuery when in hyphenated CSS notation (background-color
), or camel-cased DOM notation (backgroundColor
). For setting-style properties, the .css()
method...