How to create a style tag using JavaScript?

Last Updated : 02 Sep, 2021

The document.createElement(‘style’) method is used to create the style element using JavaScript. The steps to create style element are listed below:

Steps:

Create a style element using the following syntax
Syntax:

document.createElement('style');

Apply the CSS styles.
Append this style element to the head element.
Syntax:

document.getElementsByTagName("head")[0].appendChild(styleElement);

Example 1: This example changes the <h1> color to green by creating the style element using JavaScript.

HTML

<!DOCTYPE html> 
<html>
 
<head> 
    <title> 
        Create style tag using JavaScript
    </title> 
</head> 
     
<body> 
    <h1>GeeksForGeeks</h1>
     
    <!-- Script to add style element -->
    <script type="text/javascript">
         
        /* Function to add style element */
        function addStyle(styles) {
             
            /* Create style document */
            var css = document.createElement('style');
            css.type = 'text/css';
         
            if (css.styleSheet) 
                css.styleSheet.cssText = styles;
            else 
                css.appendChild(document.createTextNode(styles));
             
            /* Append style to the tag name */
            document.getElementsByTagName("head")[0].appendChild(css);
        }
         
        /* Set the style */
        var styles = 'h1 { color: green }';
        styles += ' body { text-align: center }';
         
        /* Function call */
        window.onload = function() { addStyle(styles) };
    </script> 
</body> 
 
</html>                    

Output:

Example 2: This example changes the <h1> text-color to white and background-color of <div> element to green by creating the style element using JavaScript.

HTML

<!DOCTYPE html>  
<html>  
 
<head> 
    <title> 
        Create style tag using JavaScript
    </title> 
</head> 
      
<body>  
    <div id="header">
        <h1>GeeksForGeeks</h1>
    </div>
     
    <!-- Script to create style tag -->     
    <script type="text/javascript">
     
        /* Function to add style */
        function addStyle(styles) {
             
            /* Create style element */
            var css = document.createElement('style');
            css.type = 'text/css';
      
            if (css.styleSheet) 
                css.styleSheet.cssText = styles;
            else 
                css.appendChild(document.createTextNode(styles));
             
            /* Append style to the head element */
            document.getElementsByTagName("head")[0].appendChild(css);
        }
         
        /* Declare the style element */
        var styles = 'h1 { color: white }';
        styles += ' body { text-align: center }';
        styles += ' #header { height: 50px; background: green }';
         
        /* Function call */
        window.onload = function() { addStyle(styles) };
    </script>    
</body>  
 
</html> 