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