极客笔记JavaScript 如何在多个CSS样式表之间切换
在本教程中，我们将学习如何使用JavaScript在多个CSS样式表之间切换。
您是否曾想过当您切换TutorialsPoint网站的主题时，它是如何改变整个网站的CSS呢？这里有一个简单的答案。当用户按下按钮时，它会切换网站的CSS样式表，就像它移除了白色主题的样式表并添加了暗色主题的样式表。
在这里，我们将看到使用JavaScript切换多个CSS文件的示例。
语法
用户可以按照下面的语法使用JavaScript在多个CSS文件之间切换。
if (style.href == 'Path_of dark.css file') {
style.href = 'light.css';
}
else {
style.href = 'dark.css';
}
在上述语法中，用户需要将dark.css文件的完整路径添加到检查dark.css样式是否应用于应用程序中，因为我们需要相应地切换CSS文件。
示例1
在下面的示例中，我们已经在head部分添加了样式表链接。我们需要将文件路径作为href属性的值添加。
每当用户点击“切换主题”按钮时，它就会调用changeStyle()函数。在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”属性的新值。