If you want to set and get the CSS properties of any HTML element, you can use jQuery CSS method. You can get a CSS property of HTML element or set single or multiple properties of HTML element using the syntax of jQuery CSS method given below.

Apply this property on occurrence of some event and see the action perform by this method.

Let’s start learning the method.

Get CSS Property

The jQuery get CSS method returns the value of the CSS property you have specified in the argument “PropertyName”. Below is the simple syntax you have to follow to use this method and get any CSS property value.

Syntax: Get CSS Property

The syntax contains the two arguments, the first parameter is the jQuery selector and second is the CSS property name below is the description of the parameters.

Sr. No. Name Description
1 selector You have to specify the id’s or class name to access the HTML element. Use dot(.) before class name and hash(#) before ids. This is a required field
2 PropertyName You have to specify the property name to get the value of it. All the basic CSS property like background, padding, color etc you can use as an argument of the second parameter. This is a required field

Output


This is the jQuery Tutorial to get CSS Property.

The above example gives you the value of the CSS property color using the jQuery css(). You will get an alert on click of the button which gives you the color code you have applied to the example paragraph.

Set Single CSS Property

The jQuery set CSS method change the value of the CSS property you have specified in the parameter “value” as given in the syntax below. See the syntax given below to use and set any CSS property value.

Syntax: Set Single CSS Property

The syntax contains the three arguments, below are the description of these parameters.

Sr. No. Name Description
1 selector Specify the id’s or class names to access the required HTML element and apply the CSS method. This is a required parameter
2 PropertyName Specify the property name you want to change the value. This is a required parameter
3 value Specify the value of the property name you want to change. This is a required parameter

Output


This is the jQuery Tutorial to set CSS Property.

The above example set the color property of an HTML element. Click the “Set Now” button given above to change the color of test given in the HTML paragraph tag.

Set Multiple CSS Properties Using jQuery CSS method

You can set multiple CSS properties using the jQUery CSS method. Specify all the CSS properties with comma separation to change the value, you can add as many properties values as you want.

Use the below given syntax to set multiple CSS property values.

Syntax: Set Multiple CSS Property

The above syntax contains the same syntax as of set single CSS method but the only difference is the multiple commas separated values within curly({}) bracket.

Sr. No. Name Description
1 selector Specify the selector parameter to access the required HTML element. This is a required field
2 PropertyName Specify the multiple CSS properties to apply the CSS using the jquery. These are the required field
3 value Specify the values for each CSS properties you want to change. These are the required field

Output


This is the jQuery Tutorial to set multiple CSS Property.

The above example contains the multiple CSS properties color, background, and padding with relevant value to change with the current value. Click the “Set Multiple Now” button to change the multiple properties values.

Leave a Reply

Your email address will not be published. Required fields are marked *