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:
