Skip to content
Related Articles

Related Articles

Improve Article
How to create a CSS rule or class at runtime using jQuery ?
  • Last Updated : 15 Jan, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :