jQuery Get and Set CSS Properties

We will learn how to get or set style properties using jQuery for the selected HTML elements.

jQuery css() Method

The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements.

This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.

Get a CSS Property Value

You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax:

$(selector).css("propertyName");

The following example will return the background-color value of the FIRST matched element:

Set a Single CSS Property and Value

The css() method can take a property name and value as separate parameters for setting a single CSS property for the elements. The basic syntax can be given with:

$(selector).css("propertyName", "value");

The following example will set the background-color value for ALL matched elements:

Set Multiple CSS Properties and Values

We can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with:

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

The following example will set a background-color and a font-size for ALL matched elements

We will learn about the jQuery Dimensions in next chapter. Click