我试着在我的网页上使用深色主题和浅色主题,但我找不到一种只用一个按钮来切换它们的方法(所以第一次点击按钮就会打开深色主题,第二次就会关闭它)。我更希望能够在不使用第三方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');
}
}
谢谢你的帮忙!
发布于 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>
并相应地更改按钮上的文本。如果它起作用了,请告诉我。
发布于 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中,您可以将更改主题函数放入其中。
https://stackoverflow.com/questions/55632813
复制相似问题