Skip to content
Related Articles

Related Articles

jQuery | css() Method
  • Difficulty Level : Easy
  • Last Updated : 18 Nov, 2020
GeeksforGeeks - Summer Carnival Banner

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:




<!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>

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:




<!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>

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:




<!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>

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 :




<!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=
   </script>
  <script
    $("button").click(function(){
      //appling 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-

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :