Learn all about the jQuery function .css().
.css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the
getComputedStyle() method in standards-based browsers versus the
runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer’s DOM implementation refers to the
float property as
styleFloat, while W3C standards-compliant browsers refer to it as
cssFloat. For consistency, you can simply use
"float", and jQuery will translate it to the correct value for each browser.
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both
.css( "background-color" ) and
.css( "backgroundColor" ). This means mixed case has a special meaning,
.css( "WiDtH" ) won’t do the same as
.css( "width" ), for example.
Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).
Retrieval of shorthand CSS properties (e.g.,
border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered
$( elem ).css( "borderTopWidth" ),
$( elem ).css( "borderBottomWidth" ), and so on.
An element should be connected to the DOM when calling
.css() on it. If it isn’t, jQuery may throw an error.
As of jQuery 1.9, passing an array of style properties to
.css() will result in an object of property-value pairs. For example, to retrieve all four rendered
border-width values, you could use
$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).