Skip to content
Related Articles

Related Articles

Improve Article

How to add CSS properties to an element dynamically using jQuery ?

  • Last Updated : 24 Mar, 2021

In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change style property of the selected element. 

The css() method can be used in different ways. This method can also be used to check the present value of the property for the selected element:

Syntax:

$(selector).css(property)

Here we have created two elements inside body tag i.e. <h1> and <h3> elements. We apply CSS property on <body> tag and <h1> tag using css() method dynamically.

Example:

HTML




<!DOCTYpe html>
<html>
  
<head>
    <title>
        How to add CSS properties to an
        element dynamically using jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("body").css("text-align", "center");
            $("h1").css("color", "green");
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to add CSS properties to an element
        <br>dynamically using jQuery?
    </h3>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up