Skip to content
Related Articles

Related Articles

Improve Article
How to create a style tag using JavaScript?
  • Last Updated : 27 Feb, 2019

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.






<!DOCTYPE html> 
<html>
  
<head
    <title
        Create style tag using JavaScrript
    </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.




<!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 :