jQuery in Action
62
CHAPTER 3
Bringing pages to life with jQuery
As described, the value accepts a function in a similar fashion to the
attr()
com-
mands. This means that we can, for instance, expand the width of all elements in
the wrapped set by 20 pixels as follows:
the wrapped set by 20 pixels as follows:
$("div.expandable").css("width",function() {
return $(this).width() + 20 + "px";
});
Don't worry that we haven't discussed the
width()
command yet. It does exactly
what you would expect it to (namely, return the width of the element as a num-
ber), and we'll discuss it in more detail shortly. One interesting side note is that
the normally problematic
ber), and we'll discuss it in more detail shortly. One interesting side note is that
the normally problematic
opacity
property will work perfectly across browsers by
passing in a value between 0.0 and 1.0; no more messing with
IE
alpha filters,
-moz-opacity
, and the like!
Next, let's look at using the shortcut form of the
css()
command, which works
exactly as the shortcut version of
attr()
worked.
As in the shortcut version of the
attr()
command, we can use functions as val-
ues to any
CSS
property in the
properties
parameter object, and they will be
called on each element in the wrapped set to determine the value that should
be applied.
be applied.
Lastly, we can use
css()
with a name passed in to retrieve the computed style
of the property associated with that name. When we say computed style, we mean
the style after all linked, embedded, and inline
the style after all linked, embedded, and inline
CSS
has been applied. Impres-
sively, this works perfectly across all browsers, even for
opacity
, which returns a
string representing a number between 0.0 and 1.0.
Command syntax: css
css(properties)
Sets the CSS properties specified as keys in the passed object to their associated values for
all matched elements
all matched elements
Parameters
properties
(Object) Specifies an object whose properties are copied as CSS proper-
ties to all elements in the wrapped set
ties to all elements in the wrapped set
Returns
The wrapped set
The wrapped set