- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a style tag using JavaScript?
JavaScript allows developers to create and manipulate style tags in order to change the appearance of a webpage. By using the document.createElement() method, the .sheet property, and the .insertRule() and .deleteRule() methods, we can add, modify, and remove CSS rules from a stylesheet. By combining these techniques with event listeners, we can create dynamic and interactive web pages that can change their appearance in response to user interactions.
One of the most powerful features of JavaScript is the ability to manipulate the DOM, which is the structure of a web page. One way to manipulate the DOM is by creating and modifying style tags using JavaScript. In this blog post, we will go over the different ways to create a style tag using JavaScript and how to use it to change the appearance of a webpage.
Creating a Style Tag
The most popular approach to construct a style tag in JavaScript is using the document.createElement() method, though there are other options as well as method createElement(). The tag name of the element we want to create is the only argument this function accepts. The argument in this situation should be "style" because we want to add a style tag.
// create a new style tag
var style = document.createElement("style");
Once the style tag is created, we can add it to the head of the document using the document.head.appendChild() method.
// add the style tag to the head of the document document.head.appendChild(style);
Alternatively, we can also create a style tag and add it to the head of the document in one line of code using the innerHTML property.
// create and add a new style tag to the head of the document document.head.innerHTML += "<style></style>";
Updating the Styles
Once the style tag is created, we can use the .sheet property to access the stylesheet object and the .insertRule() method to add new CSS rules to it. The .insertRule() method takes two arguments: the first is the CSS rule you want to add, and the second is the index at which you want to insert the rule. If you don't specify an index, the rule will be added to the end of the stylesheet.
// add a new CSS rule to the stylesheet style.sheet.insertRule("body { background-color: red; }", 0);
You can also use the .append() method to add multiple CSS rules at once.
// add multiple CSS rules to the stylesheet style.sheet.append("body { background-color: red; }"); style.sheet.append("h1 { color: white; }");
Changing the Existing Styles
We can change the existing styles by using the .cssText property of the styleSheet object.
// change the existing styles style.sheet.cssText = "body { background-color: blue; }";
Removing Styles
To remove a specific CSS rule, we can use the .deleteRule() method. This method takes a single argument, which is the index of the rule you want to remove.
style.sheet.deleteRule(0);
To remove all the CSS rules, we can use the .cssText property.
// remove all the CSS rules style.sheet.cssText = "";
Example
Let's say we want to change the background color of a webpage when a button is clicked. We can create a style tag and add a CSS rule to change the background color using the following code −
<html>
<head>
<script>
// get the button element when the DOM is loaded
var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule("body { background-color: red; }", 0);
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("changeColor");
// add an event listener to the button
button.addEventListener("click", function() {
// change the background color of the body
document.body.style.backgroundColor = "blue";
});
});
</script>
</head>
<body>
<button id="changeColor">Change Color</button>
</body>
</html>
In this example, we first create a new style tag and add it to the head of the document. Then we add a CSS rule to change the background color of the body to red. When the button is clicked, we change the background color of the body to blue using the .cssText property.
4K+ Views
