Insert a new CSS rule while working on JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

For this, you can use insertRule() with sheet. The code is as follows −


Following is the code −

 Live Demo

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
   <div id="demo">
      This is a JavaScript program
   var creatingStyle = document.createElement("style");
background-color: red;

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VSCode editor −


This will produce the following output on console −

Published on 09-Nov-2020 11:46:16