Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | css() Method

  • Difficulty Level : Easy
  • Last Updated : 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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

$(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>
                 /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>
                 /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>
                 /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=
   </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-




My Personal Notes arrow_drop_up
Recommended Articles
Page :