jQuery | css() Method

11 Aug, 2021
The JQuery library supports almost all the selectors that are included in the Cascading Style Sheet (CSS). The css() method in JQuery is used to change the style property of the selected element. The css() in JQuery can be used in different ways.css() method can used to check the present value of the property for the selected element:
Syntax:
$(selector).css(property)
Return value: It will return the value of the property for the selected element. 
Example 1:
Input: $("p").css("color");
Output: Output of the above input will return the 
rgb() value of the element.
Code #1:
HTML
<!DOCTYPE html> <head>    <script src="https://ajax.googleapis.com/ajax/libs                 /jquery/3.3.1/jquery.min.js">                 // this is the link of JQuery CDN direct from the        // jquery website so that we can use all the        //function of JQuery css()    </script></head> <body>    <button>Click here and it will return the color value            of p element</button>    <p style="color:green">Wecome to gfg!</p> </body><script>    $(document).ready(function() {                 //here selecting button element        $("button").click(function() {                         // here when the button is clicked css() method            // will return the value using alert method            alert($("p").css("color"));        });    });</script> </html>
Output: Before clicking the button-
After clicking the button-
css() method also used to add or change the property for the selected element. 
Syntax:
$(selector).css(property, value)
Return value: This will change the value of the property for the selected element. 
Example 2:
Input: $("p").css("color", "red");
Output: Output of the "p" element becomes red 
whatever may be the color previously.
Code #2:
HTML
<!DOCTYPE html> <head>    <script src="https://ajax.googleapis.com/ajax/libs                 /jquery/3.3.1/jquery.min.js">                          // this is the link of JQuery CDN direct from        // the jquery website so that we can use all        // the function of JQuery css()    </script></head> <body>    <button>Click here and it will return the color value            of p element</button>    <p style="border: 2px solid green;color:red;padding:5px">              Wecome to gfg!.</p> </body><script>    $(document).ready(function() {                 // here selecting button element        $("button").click(function() {                         // here when the button is clicked css()            // method will change the color of paragraph            $("p").css("color", "green");        });    });</script> </html>
Output: Before clicking the button-
After clicking the button-
css() method can use function to change the css property for the selected element: 
Syntax:
$(selector).css(property, function(index, currentvalue))
Return value: It will return with the changed value for the selected property. 
Example 3:
Input: $("p").css("padding", function(i){ return i+20;});
Output: Output will get is the paragraph with padding value
 increases to "25px" whatever be the initial value.
Code #3:
HTML
<!DOCTYPE html> <head>    <script src="https://ajax.googleapis.com/ajax/libs                 /jquery/3.3.1/jquery.min.js">                          //this is the link of JQuery CDN direct from        //the jquery website so that we can use all        //the function of JQuery css()    </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> </body><script>    $(document).ready(function() {        $("button").click(function() {            $("p").css("padding", function(h) {                return h + 30;            });        });    });</script> </html>
Output: Before clicking the button-
After clicking the button-
We can also apply more than one property at a time in JQuery with the help of css method.
Note: In this method we write property name in camelCase.
Syntax:
$(selector).css({property:value, property:value, ...})
Code #4 :
HTML
<!DOCTYPE html><html><head>  <title>Document</title></head> <body>     <p style="border: 2px solid green;color:green;padding=5px;">            Welcome to gfg!.</p>   <button>Apply css</button>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   </script>  <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:
Before clicking the button-
After clicking the button-
nikhilchhipa9
kalrap615
jQuery-HTML/CSS
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?