jQuery css() Method
The css() method in jQuery is used to change the style property of the selected element. This method can be used in different ways. The css() method can be used to get/return the present value of the property for the selected element.
Syntax:
$(selector).css(property)
or
$(selector).css(property, value)
or
$(selector).css(property, function(index, currentvalue))
or
$(selector).css({property:value, property:value, ...})
Return value: It will return the value of the property for the selected element.
Example 1: In this example, we will use css() method to get the text color of the paragraph element.
HTML
<!DOCTYPE html><html><head> <script src= </script></head><body> <button> Click here and it will return the color value of p element </button> <p style="color:green">Welcome to gfg!</p></body><script> $(document).ready(function () { // Here selecting button element $("button").click(function () { // When the button is clicked, css() method // will return the value using alert method alert($("p").css("color")); }); });</script></html> |
Output:
Example 2: In this example, we will use css() method to change the CSS style of the selected element.
HTML
<!DOCTYPE html><html> <head> <script src= </script></head><body> <button> Click here and it will change the color of paragraph element </button> <p style="border: 2px solid green; color:red;padding:5px"> Wecome to gfg!. </p></body><script> $(document).ready(function () { // Selecting button element $("button").click(function () { // When the button is clicked css() method // will change the color of paragraph $("p").css("color", "green"); }); });</script></html> |
Output:
Example 3: In this example, we will use css() method to add styles using function.
HTML
<!DOCTYPE html><html> <head> <script src= </script></head><body> <button> Click here and the padding will change. </button> <p style="border: 2px solid green; color: green; padding: 5px;"> Welcome to gfg!. </p> <script> $(document).ready(function () { $("button").click(function () { $("p").css("padding", function (h) { return h + 30; }); }); }); </script></body> </html> |
Output:
Example 4: In this example, we will use css() method to apply multiple CSS properties simultaneously.
HTML
<!DOCTYPE html><html><head> <script src= </script></head><body> <p style="border: 2px solid green;color:green;padding:5px;"> Welcome to gfg!. </p> <button>Apply css</button> <script> $("button").click(function () { // Applying more than one property at a time // Note: property name written in camelCase $("p").css({ "backgroundColor": "green", "color": "white", "fontSize": "20px" }); }); </script></body></html> |
Output:
Please Login to comment...