在本教程中，我们将学习使用 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 样式表之间切换？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 在多个 CSS 样式表之间切换？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
