jQuery - CSS Properties

Quiz

jQuery provides css() method to manipulate CSS properties of the matched elements.

JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.

jQuery - Get CSS Properties

jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName);

jQuery understands and returns the correct value for both css( "background-color" ) and css( "backgroundColor" ).

Example

Let's try the following example and verify the result. This should return the background color of the first matched

The jQuery Example

Click the below button to see the result:

Blue

Green

jQuery - Set CSS Properties

jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:

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

Here both the parameters are required, propertyName represents a CSS property name where as value represents a valid value of the property.

Example

Let's try the following example and verify the result. Here we will take the color of the first matched

and will change the text color of all

using the div background-color.

The jQuery Example

Click the below button to see the result:

Blue

Green

jQuery - Set Multiple CSS Properties

You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you like in a single call.

Following is the syntax of the css() method to set multiple CSS properties:

$(selector).css({propertyName1:value1, propertyName2:value2,...});

Example

Let's try the following example and verify the result. Here we will set background color of all the

to "#fb7c7c;" and font-size to 25px.

The jQuery Example

Click the below button to see the result:

Blue

Green

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

Print Page