Skip to content
Related Articles

Related Articles

How to create a style tag using JavaScript?

Improve Article
Save Article
Like Article
  • 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>

Output: 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!