在本教程中，我们将学习使用 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 文件。
在下面的示例中，我们在头部添加了样式表的链接。我们需要添加文件路径作为 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;
}
在下面的示例中，我们创建了四个不同的样式表。此外，我们还在每个 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中文网其它相关文章！
已抢27316个
抢
已抢14721个
抢
已抢7398个
抢
已抢9273个
抢
已抢18382个
抢
已抢7134个
抢