如何使用 JavaScript 在多个 CSS 样式表之间切换？-js教程-PHP中文网

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

PHPz

发布： 2023-09-01 13:29:02

转载

1295人浏览过

如何使用 javascript 在多个 css 样式表之间切换？

在本教程中，我们将学习使用 JavaScript 在多个 CSS 样式表之间切换。

你有没有想过，当你切换TutorialsPoint网站的主题时，它会如何改变整个网站的CSS？这是一个简单的答案。当用户按下按钮时，它会切换网站的 CSS 样式表，就像删除白色主题的样式表并添加深色主题的样式表一样。

在这里，我们将看到使用 JavaScript 在多个 CSS 文件之间切换的示例。

语法

用户可以按照以下语法使用 JavaScript 在多个 CSS 文件之间切换。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

在上面的语法中，用户需要添加 dark.css 文件的完整路径，以检查 dark.css 的样式是否在应用程序中应用，因为我们需要相应地切换 CSS 文件。

示例 1

在下面的示例中，我们在头部添加了样式表的链接。我们需要添加文件路径作为 href 属性的值。

每当用户单击“切换主题”按钮时，它都会调用changeStlye()函数。在changeStyle()函数中，我们通过id访问“link”元素。此外，我们检查'href'属性的值是否等于dark.css文件的路径，并将其更改为'light.css'文件的路径；否则，转到“dark.css”文件。

用户可以在各自的文件中添加以下代码，然后单击切换主题来切换样式表。

文件名：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>

登录后复制

文件名：dark.css

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

登录后复制

文件名：light.css

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

登录后复制

示例 2

在下面的示例中，我们创建了四个不同的样式表。此外，我们还在每个 CSS 文件中为网页添加了不同的样式。

每当用户单击任何按钮时，它都会使用样式表的路径执行 chageSheet() 函数。在 JavaScript 中，我们使用 setAttribute() 方法设置 href 属性值，该方法是在参数中获取的。

用户可以点击不同的按钮，观察网页风格的变化。

文件名：-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>

登录后复制

文件名：- style1.css

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

登录后复制

文件名：- style2.css

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

登录后复制

文件名：- style3.css

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

登录后复制

文件名：- style4.css

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

登录后复制

用户在本教程中学会了在多个 CSS 文件之间切换，当我们需要在主题之间切换时，这是一个基本功能。在第一个示例中，我们访问 href 属性并设置其值。在第二个示例中，我们使用 setAttribute() 方法设置“href”属性的新值。

以上就是如何使用 JavaScript 在多个 CSS 样式表之间切换？的详细内容，更多请关注php中文网其它相关文章！