Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.includes('dark.css')) {
style.href = 'light.css';
} else {
style.href = 'dark.css';
}
In the above syntax, we access the stylesheet's href property and check if it contains the dark.css filename. Based on this condition, we toggle between different stylesheets.
Using Direct href Property Assignment
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 changeStyle() function. In the changeStyle() function, we access the 'link' element by id. Furthermore, we check if the href attribute contains the dark.css file, and we change it to the light.css file; otherwise, to the dark.css file.
Filename: index.html
<!DOCTYPE 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()">Toggle theme</button>
<script>
function changeStyle() {
var style = document.getElementById('style');
if (style.href.includes('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;
padding: 10px 20px;
border: none;
cursor: pointer;
}
Filename: light.css
* {
background-color: #fff;
color: #000;
}
button {
background-color: #007cba;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
Using setAttribute() Method
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 changeSheet() 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.
Filename: index.html
<!DOCTYPE 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')">Pink Theme</button>
<button onclick="changeSheet('style2.css')">Light Theme</button>
<button onclick="changeSheet('style3.css')">Green Theme</button>
<button onclick="changeSheet('style4.css')">Blue Theme</button>
<script>
function changeSheet(sheet) {
var style = document.getElementById('style');
style.setAttribute('href', sheet);
}
</script>
</body>
</html>
Filename: style1.css
* {
background-color: pink;
color: black;
}
button {
background-color: white;
color: black;
margin: 5px;
padding: 8px 16px;
border: 1px solid #ccc;
cursor: pointer;
}
Filename: style2.css
* {
background-color: #fff;
color: #000;
}
button {
background-color: #f0f0f0;
color: black;
margin: 5px;
padding: 8px 16px;
border: 1px solid #ccc;
cursor: pointer;
}
Filename: style3.css
* {
background-color: green;
color: white;
}
button {
background-color: darkgreen;
color: white;
margin: 5px;
padding: 8px 16px;
border: none;
cursor: pointer;
}
Filename: style4.css
* {
background-color: blue;
color: white;
}
button {
background-color: darkblue;
color: white;
margin: 5px;
padding: 8px 16px;
border: none;
cursor: pointer;
}
Key Points
- Use
document.getElementById()to access the link element containing the stylesheet - The
hrefproperty can be directly assigned or modified usingsetAttribute() - Use
includes()method to check if the current stylesheet contains specific text - Multiple stylesheets can be switched by passing different CSS file paths as parameters
Conclusion
Switching between multiple CSS stylesheets using JavaScript is essential for implementing theme toggles and dynamic styling. Both direct href assignment and setAttribute() method provide effective ways to change stylesheets dynamically.
2K+ Views
