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 switch between multiple CSS stylesheets using JavaScript?
In this tutorial, we will learn to switch between multiple CSS stylesheets using JavaScript.
Have you ever thought that when you toggle the theme of TutorialsPoint’s website, how it changes the CSS of the whole website? Here is a simple answer. When the user presses the button, it switches the CSS stylesheets for the website like it removes the stylesheet for the white theme and adds the stylesheet for the dark theme.
Here, we will see examples of switching between multiple CSS files using JavaScript.
Syntax
Users can follow the syntax below to switch between multiple CSS files using JavaScript.
if (style.href == 'Path_of dark.css file') {
style.href = 'light.css';
}
else {
style.href = 'dark.css';
}
In the above syntax, users need to add the full path of the dark.css file to check if the styles of dark.css are applied in the application, as we need to toggle CSS files accordingly.
Example 1
In the example below, we have added the link to the stylesheet in the head section. We need to add the file path as a value of the href attribute.
Whenever the user clicks the ‘toggle theme’ button, it invokes the changeStlye() function. In the changeStyle() function, we access the ‘link’ element by id. Furthermore, we check if the value of the ‘href’ attribute is equal to the path of the dark.css file, and we change it to the path of the ‘light.css’ file; Otherwise, to the ‘dark.css’ file.
Users can add the below code in the respective files and click the toggle theme between to switch stylesheets.
Filename: index.html
<html>
<head>
<!-- add css file -->
<link rel = "stylesheet" type = "text/css" href = "dark.css" id = "style">
</head>
<body>
<h2> Switching <i> between multiple stylesheets </i> in JavaScript </h2>
<button onclick = "changeStyle()"> Toogle theme </button>
<script>
// change stylesheet using JavaScript
function changeStyle() {
var style = document.getElementById('style');
if (style.href == 'file:///C:/Data%20E/dark.css') {
style.href = 'light.css';
} else {
style.href = 'dark.css';
}
}
</script>
</body>
</html>
Filename: dark.css
* {
background-color: #000;
color: #fff;
}
button{
background-color: white;
color: black;
}
Filename: light.css
* {
background-color: #fff;
color: #000;
}
Example 2
In the example below, we have created four different stylesheets. Also, we have added different styles for the web page in every CSS file.
Whenever the user clicks any button, it executes the chageSheet() function with the path of the stylesheet. In JavaScript, we set the href attribute value using the setAttribute() method, which we got in the parameter.
Users can click on the different buttons and observe the changes in the web page styles.
Filename :- index.html
<html>
<head>
<!-- add css file -->
<link rel = "stylesheet" type = "text/css" href = "style1.css" id = "style">
</head>
<body>
<h2> Switching <i> between multiple stylesheets </i> in JavaScript. </h2>
<button onclick = "changeSheet('style1.css')"> Style 1 </button>
<button onclick = "changeSheet('style2.css')"> Style 2 </button>
<button onclick = "changeSheet('style3.css')"> Style 3 </button>
<button onclick = "changeSheet('style4.css')"> Style 4 </button>
<script>
// change stylesheet using JavaScript
function changeSheet(sheet) {
var style = document.getElementById('style');
style.setAttribute('href', sheet);
}
</script>
</body>
</html>
Filename :- style1.css
Filename :- style1.css
* {
background-color: pink;
color: black;
}
button{
background-color: white;
color: black;
}
Filename :- style2.css
* {
background-color: #fff;
color: #000;
}
Filename :- style3.css
* {
background-color: green;
color: white;
}
Filename :- style4.css
* {
background-color: blue;
color: white;
}
Users learned to switch between multiple CSS files in this tutorial, which was an essential feature when we were required to switch between themes. In the first example, we access the href attribute and set its value. In the second example, we have used the setAttribute() method to set a new value of the ‘href’ attribute.
1K+ Views
To Continue Learning Please Login