如何使用<button>在两个CSS文档之间切换
如何使用<button>在两个CSS文档之间切换
提问于 2019-04-11 20:43:13
我试着在我的网页上使用深色主题和浅色主题，但我找不到一种只用一个按钮来切换它们的方法(所以第一次点击按钮就会打开深色主题，第二次就会关闭它)。我更希望能够在不使用第三方JavaScript库的情况下做到这一点。我已经找到了一种使用<option>元素来实现这一点的方法，但这不是我想要的“切换按钮”：
<button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
<select id="select">
<option>Dark Theme</option>
<option>Revert To Original</option>
</select>和
function getTheme () {
function changeTheme (Theme) {
document.getElementById('style').setAttribute('href', Theme);
}
var index = document.getElementById("select").selectedIndex;
switch (index) {
case 0:
changeTheme('css/dark.css');
break;
case 1: changeTheme('css/main.css');
}
}谢谢你的帮忙!
回答 2
Stack Overflow用户
发布于 2019-04-11 20:50:35
我知道这看起来有点业余，但你可以做这样的事情，
<button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
<script>
var click = 0;
function getTheme()
{
click++;
if(click%2 == 0)
changeTheme('css/dark.css');
else
changeTheme('css/main.css');
}
</script>并相应地更改按钮上的文本。如果它起作用了，请告诉我。
Stack Overflow用户
发布于 2019-04-11 21:06:54
一种简单的方法是：
HTML
<input type="button" value="Dark" id="button" onclick=getTheme()></input> JavaScript
function getTheme () {
var button = document.getElementById("button");
if(button.value === "Dark") {
button.value = "Revert To Original";
} else {
button.value = "Dark";
}
}在if/else中，您可以将更改主题函数放入其中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55632813
复制相关文章
相似问题