数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 属性的值添加。
每当用户点击“切换主题”按钮时，它就会调用 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”属性的新值。
1K+ 浏览量
