If you want to set and get the CSS properties of any HTML element, you can use the 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 the 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
|
1 |
$("selector").css("PropertyName") |
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 |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-getcss").click(function(){ alert("The color of the element is: "+ $("#para-getcss").css("color")); }); }); </script> <button id="btn-getcss">Click to Get CSS</button> <p id="para-getcss" style="color:red;background:#ccc;padding:10px;">This is the jQuery Tutorial to get CSS Property.</p> |
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 changes 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
|
1 |
$("selector").css("PropertyName","value") |
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 |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-setcss").click(function(){ $("#para-setcss").css("color","#000"); }); }); </script> <button id="btn-setcss">Click me to Set CSS</button> <p id="para-setcss" style="color:red;background:yellow;padding:10px;">This is the jQuery Tutorial to set CSS Property.</p> |
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
|
1 |
$("selector").css({"PropertyName1":"value1","PropertyName2":"value2","PropertyName3":"value3"...............}) |
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 |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-multiplecss").click(function(){ $("#para-multiplecss").css({"color":"#fff","background":"green","padding":"20px"}); }); }); </script> <button id="btn-multiplecss">Click me to Set Multiple CSS</button> <p id="para-multiplecss" style="color:red;background:#ccc;padding:10px;">This is the jQuery Tutorial to set multiple CSS Property.</p> |
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.