The jQuery css() method can be used to return or set the CSS properties for the selected elements. You can use this method to add single and multiple CSS properties.
Syntax of css() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters are given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the selector for selecting the element and return and set the CSS property. It can be done by using the tag name, class name, or id of the elements to select. |
| propertyname | It is the name of the CSS property you want to select or return you want to add to the element. It can be single or multiple with spaces. |
| value | An index returns the position of the selected element. |
jQuery css() Method Get or Return CSS Property of an Element
If you want to get the value of CSS property, you can use this method as given in the example below. The below example contains an added style to the paragraph element. The method returns the value of the CSS property ‘border’ in the alert box.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.returncssbtn').click(function(){ var mycss = $("p").css("border"); alert(mycss); }); }); </script> <button type="button" class="returncssbtn">Click to Return CSS</button><br><br> <p style="padding:10px;border:1px solid #ccc;">This is the paragraph.</p> |
Output
This is the paragraph.
You have to click the button given above to return the value of specified CSS property. It displays an alert box showing the value of the CSS property border.
Set CSS Property Using jQuery css() Method
The jQuery css() method also sets the CSS property of the selected element. You have to specify the CSS property with its value to add to the element.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.setcssbtn').click(function(){ $("p").css("border","1px solid #ccc"); }); }); </script> <button type="button" class="setcssbtn">Click to Set CSS</button><br><br> <p style="padding:10px;">This is the paragraph.</p> |
Output
This is the paragraph.
Click the button given above to add the CSS property border with its value. You can find the added border after you click the button given above.
How to Set Multiple CSS Property of the Selected Element
In addition to all these, you can also set multiple CSS properties for the selected element. See the example given below to specify the multiple CSS properties and add to the element.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.setmulticssbtn').click(function(){ $("p").css({"border":"1px solid #ccc", "background":"green", "color":"#fff"}); }); }); </script> <button type="button" class="setmulticssbtn">Click to Set Multiple CSS</button><br><br> <p style="padding:10px;">This is the paragraph.</p> |
Output
This is the paragraph.
When you click the button above, it adds three CSS properties to the selected element. See the output showing the added CSS using the jQuery css() method.
You may also like to read
- How jQuery Add Style to HTML Element and Apply CSS
- How jQuery Apply Multiple CSS Style to HTML Element
I hope you like this tutorial on jQuery css() method. If you have any queries regarding the tutorial, please comment below.
References