Skip to content
Related Articles
Open in App
Not now

Related Articles

What is the use of css() method in jQuery ?

Improve Article
Save Article
  • Last Updated : 06 Sep, 2021
Improve Article
Save Article

In this article, we will see how to use css() method to set the styles on elements dynamically using jQuery. The css() method is used to change the style property of the selected element. 

Syntax:

$(selector).css(property)

Approach: Here, we have added a paragraph element and a button and after clicking on the button, the css() method is called and this method apples the CSS styles on the paragraph element.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the use of css() method in JQuery?
    </title>
  
    <script src=
    </script>
  
    <style>
        body {
            text-align: center;
        }
          
        button {
            background-color: green;
            color: white;
            font-size: 24px;
            border-radius: 5px;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
        }
    </style>
  
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#GFG").css({
                    color: "white",
                    background: "green",
                    fontSize: "25px",
                    display: "table",
                    margin: "0px auto 0px auto"
                });
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <h2>
        What is the use of css() method in JQuery?
    </h2>
  
    <p id="GFG">
        Welcome to GeeksforGeeks!
    </p>
  
    <br>
  
    <button>
        Click Here
    </button>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!