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

互联网上的许多网站都有多个主题。可以通过将多个样式表放入 HTML 代码并一次启用一个来获得任何功能。使用 标记将 CSS 文件包含到 HTML 的 标记中。

“href”属性指定 CSS 文件的文件位置。通过更改此标签，我们可以向网站添加新的 CSS。可以使用以下任何一种方法来完成实施。

方法一：当你想做一个开关或切换按钮时，切换CSS。它根据当前活动值在值之间切换。

HTML

  

    
    
  
    
        function toggleTheme() {
            // Obtains an array of all <link>
            // elements.
            // Select your element using indexing.
            var theme = document.getElementsByTagName('link')[0];
  
            // Change the value of href attribute 
            // to change the css sheet.
            if (theme.getAttribute('href') == 'light.css') {
                theme.setAttribute('href', 'dark.css');
            } else {
                theme.setAttribute('href', 'light.css');
            }
        }
    

  

    Changing Style Sheets
    
    Click below button to switch between 
    light and dark themes.
      
    Switch

  

输出：

轻主题：

单击切换按钮时：

黑暗主题：

方法二：当你想从多个样式表中进行选择时。 “href”属性的值传递给函数调用本身。

先决条件：准备一个文件夹中的所有样式表。

HTML

  

    
    
  
    
        function toggleTheme(value) {
  
            // Obtain the name of stylesheet 
            // as a parameter and set it 
            // using href attribute.
            var sheets = document
                .getElementsByTagName('link');
  
            sheets[0].href = value;
        }
    

  

    Changing Style Sheets
    
    Switch between multiple themes 
    using the buttons below.
  
    
        Light
    
      
    
        Dark
    
      
    
        Geeky
    
      
    
        Aquatic
    

  

输出：

轻主题：

黑暗主题：

极客主题：

水上主题：

注意：具有所需名称的相应 CSS 文件应该可用，并且应该使用函数传递它们的路径。此处指定的文件位于 HTML 文件的同一文件夹中，因此路径类似于“light.css”。