jQuery | css() Method

The JQuery library support almost all the selector that are included in the Cascading Style Sheet (CSS). The css() method in JQuery is used to change 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 wil 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
                 /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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
                 /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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<head>
                 /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>

chevron_right


Output:
Before clicking the button-

After clicking the button-



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.