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 load CSS files using JavaScript?
Sometimes, the task is change the page themes and to use different CSS files on the same page content. In such tasks the need is to fetch a CSS and load it dynamically while selecting a theme. In this case the CSS file has to be accessed, loaded and even selected through a javascript program. Using HTML and javascript code this process of loading the CSS file is demonstrated in this article. This is shown by using two different examples. In the first example, a CSS file is selected on the windows load event. In the second example, two buttons are used to load separate CSS files on button clicks.
Example 1: Loading the CSS file on window.onload( )
Folder and Pages Design Steps −
Step 1 − Make an html file and start writing the code. Create a CSS file and define the styles for background, p tag and h1 tag.
Step 2 − Inside the <script> tags in the html file, write the code which will be executed when the page is fully loaded. Use window.onload() for this.
Step 3 − Inside the <script> tags write the code to fetch the head tag first. Then make a link tag and set its properties.
Step 4 − Select the css file and add it to the href of the link.
Step 5 − Now add this created link into the head tag.
Step 6 − Load the HTML file in a browser and check the result.
Main html file : loadcss1.html
CSS file used: cssfilenew.css
Code For loadcss1.html
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link"); How to load CSS files using JavaScript?
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
</body>
</html>
Code For cssfilenew.css
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
Viewing The Result
For seeing the result open the html file in a browser. The styles will be included in the CSS file that is loaded using Javascript.
Example2: Loading the different CSS files on click of two buttons
Folder and Pages Design Steps −
Step 1 − Make an HTML file and start writing the code. Create two CSS files and define the different styles for the background, p tag, and h1 tag in these.
Step 2 − Inside the <script> tags in the HTML file, make two functions, function1, and function2. Write the code for these functions which will be executed when these functions will be called.
Step 3 − Inside the <script> tags, in both of these functions write the code to fetch the head tag first. Then make a link tag and set its properties.
Step 4 − Select the different CSS files through both functions and add these to the href of the link.
Step 5 − Add this created link to the head tag.
Step 6 − Now create two buttons and call these two functions on different button clicks.
Step 7 − Load the HTML file in a browser. The CSS file is not added initially. It will be added on the button clicks. Click both buttons and check the results.
Main HTML file: loadcss2.html
CSS files used: cssfile.css and cssfilenew.css
Code For loadcss2.html:
<!DOCTYPE html>
<html>
<head>
<script>
// run this function when the document is loaded
function1 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfile.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
function2 = () => {
var headTag = document.getElementsByTagName('head')[0]
const linkforCSSfile = document.createElement("link");
linkforCSSfile.href = 'cssfilenew.css'
linkforCSSfile.type = 'text/css'
linkforCSSfile.rel = 'stylesheet'
headTag.appendChild(linkforCSSfile);
document.body.appendChild(headTag);
};
</script>
</head>
<body>
<h1>Example 1</h1>
<p id="showaddedCSS"> To load the CSS file using JS</p>
<button onclick="function1()">Load CSS file One</button>
<button onclick="function2()">Load CSS file Two</button>
</body>
</html>
Code For cssfile.css
body {
background-color: rgb(167, 197, 110);
}
h1 {
color: rgb(87, 15, 55);
}
p {
color: rgb(4, 59, 20);
}
Code For cssfilenew.css
body {
background-color: rgb(110, 187, 197);
}
h1 {
color: rgb(15, 15, 87);
}
p {
color: rgb(197, 31, 31);
}
Viewing The Result
For seeing the result open the html file in a browser. The styles will be included from the CSS files that are loaded on button clicks.
3In this article, using two different examples, the ways to show how to load the CSS file dynamically using the javascript code are given. First, the method is given where a CSS file is selected when the page is loaded and then the way of using the CSS files on button click is given. For this two buttons are clicked to load different CSS files and change the style of the same page.
5K+ Views
