Open In App

How to create a CSS rule or class at runtime using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

It’s a common practice to write a CSS file for our HTML. Those are called static CSS. When we want to create our Cascading Style Sheet rule at runtime, we need jQuery. The jQuery enables us to apply styles to our HTML dynamically.

The CSS rules once written can be stored in a variable and used multiple times wherever needed.
We use jQuery’s css(“arrtibute1”, “value1”).

Below example illustrates the approach:

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Rules with JQuery</title>
    <script 
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div id="myId">
        <h1>GeeksforGeeks</h1>
    </div>
  
    <div class="myclass">
        <h1>A Computer Science Portal for Geeks</h1>
    </div>
  
    <script>
  
        // Here 'my_css' variable stores the Style
        var my_css = {
            backgroundColor: "red",
            color: "rgb(0,255,0)"
        }
        $("#myId").css(my_css);
  
        var my_class_css = {
            background: "green",
            color: "rgb(255,255,255)"
        }
        $(".myclass").css(my_class_css);
    </script>
  
</body>
  
</html>


Output:

Example 2: It also has an alternative where you can directly use a CSS-like styling code instead of a JavaScript-like styling.




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Rules with JQuery</title>
    <script 
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
crossorigin="anonymous">
  </script>
</head>
  
<body>
    <div id="myId">
        <h1>Without Coding</h1>
    </div>
  
    <div class="myclass">
        <h1>There are no Geeks</h1>
    </div>
  
    <script>
        $(document).ready(function() {
  
            // Build your CSS.
            var body_css = {
                "background-color": "rgb(0,0,0)",
                "font-weight": "",
                "color": "rgb(255,255,255)"
            }
  
            $("body").css(body_css);
        });
    </script>
  
</body>
  
</html>


Output:



Last Updated : 15 Jan, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads