如何使用 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
在下面的示例中，我们在头部添加了样式表的链接。我们需要添加文件路径作为 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
开始使用Chart.js：PIE，DONUT和BUBBLE图表
Mar 15, 2025 am 09:19 AM
本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
