How to switch between multiple CSS stylesheets using JavaScript?-JS Tutorial-php.cn

How to switch between multiple CSS stylesheets using JavaScript?

PHPz

Release： 2023-09-01 13:29:02

forward

1172 people have browsed it

如何使用 JavaScript 在多个 CSS 样式表之间切换？

In this tutorial, we will learn to switch between multiple CSS stylesheets using JavaScript.

Have you ever wondered how when you switch the theme of a TutorialsPoint website, it changes the CSS of the entire website? This is a simple answer. When the user presses the button, it switches the website's CSS stylesheet, like removing the white theme's stylesheet and adding the dark theme's stylesheet.

Here we will see an example of switching between multiple CSS files using JavaScript.

grammar

Users can use JavaScript to switch between multiple CSS files according to the following syntax.

if (style.href == 'Path_of dark.css file') { 
   style.href = 'light.css'; 
} 
else { 
   style.href = 'dark.css'; 
}

Copy after login

In the above syntax, users need to add the full path of dark.css file to check whether the styles of dark.css are applied in the application, because we need to switch the CSS file accordingly.

Example 1

In the example below, we added a link to the style sheet in the header. We need to add the file path as the value of the href attribute.

Whenever the user clicks the "Switch Theme" button, it calls the changeStlye() function. In the changeStyle() function, we access the "link" element by id. Additionally, we check if the value of the 'href' attribute is equal to the path of the dark.css file and change it to the path of the 'light.css' file; otherwise, go to the 'dark.css' file.

Users can add the following code in their respective files and click Switch Theme to switch style sheets.

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

Copy after login

File name: dark.css

* {
   background-color: #000;
   color: #fff;
}
button{
   background-color: white;
   color: black;
}

Copy after login

File name: light.css

* {
   background-color: #fff;
   color: #000;
}

Copy after login

Example 2

In the example below, we create four different style sheets. Additionally, we added different styles to the web page in each CSS file.

Whenever the user clicks on any button, it executes the chageSheet() function using the path to the stylesheet. In JavaScript, we set the href attribute value using the setAttribute() method, which is obtained in the parameter.

Users can click different buttons to observe changes in web page style.

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

Copy after login

File name:- style1.css

Filename :- style1.css
* {
   background-color: pink;
   color: black;
}
button{
   background-color: white;
   color: black;
}

Copy after login

File name:- style2.css

* {
   background-color: #fff;
   color: #000;
}

Copy after login

File name:- style3.css

* {
   background-color: green;
   color: white;
}

Copy after login

File name:- style4.css

* {
   background-color: blue;
   color: white;
}

Copy after login

Users learned in this tutorial to switch between multiple CSS files, which is an essential feature when we need to switch between themes. In the first example, we access the href attribute and set its value. In the second example, we set the new value of the "href" attribute using the setAttribute() method.

The above is the detailed content of How to switch between multiple CSS stylesheets using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!