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

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

Last Updated : 02 Jun, 2023

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. basically, The CSS() method is used to get the value of a certain CSS property that has been applied to a specific HTML element. Additionally, it is used to set the CSS property with its value for the specific HTML 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 applies the CSS styles on the paragraph element.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        What is the use of css() method in JQuery?
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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:

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

V

vkash8574

Improve

Article Tags :

Similar Reads

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

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax inte

What is the purpose of fadeToggle() method in JQuery ?

In this article, we will see how to create a fadeToggle effect using jQuery. The fadeToggle effect can be created using fadeToggle() method.The fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If elements are faded in, fadeToggle() will fade out. If elements are fade

What is the use of CSS ruleset ?

In this article, we will learn about the CSS Ruleset & its implementation. The CSS Ruleset is various affirmations to various pieces or elements of the document. The objective is to apply a bunch of properties for certain distinct qualities to a solitary, or a particular arrangement of component

How to use Method Chaining in jQuery ?

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms simplifies HTML document traversing, manipulation, browser event handling, DOM animations, AJAX interact

What is the use of asterisk (*) selector in CSS ?

The asterisk (*) selector in CSS, known as the universal selector, is used to target and apply styles to all elements on a webpage, regardless of their type or hierarchy. It's especially useful for global styling, such as resetting margins or applying uniform properties across the document.For examp