我正在尝试在我的网页上使用黑色主题和灯光主题,但我找不到用一个按钮切换它们的方法(因此,第一次点击按钮会打开黑暗主题,第二次将其关闭) 。我希望能够在不使用第三方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');
}
}
谢谢你的帮助!
另一种方法是使用布尔值。您可以在每次单击时更改布尔值。你可以用这个布尔值来切换css。
<button onclick=getTheme()>Click to use this theme.</button>
JS
var bool = true;
function getTheme() {
function changeTheme (theme) {
document.getElementById('style').setAttribute('href', theme);
}
bool = !bool;
var theme = bool ? 'css/dark.css' : 'css/main.css';
changeTheme(theme);
}
这确实很有效,但有没有办法使用document.getElementById(“themeToggle”)。innerHTML =“New text!”;用这个来改变“黑暗主题”或“浅色主题”之间的按钮
您可以使用相同的逻辑,例如:
var bool = true;
function getTheme() {
function changeTheme (theme, text) {
document.getElementById('style').setAttribute('href', theme);
document.getElementById('themeToggle').innerText = text;
}
bool = !bool;
var theme = bool ? 'css/dark.css' : 'css/main.css';
var text = bool ? 'Dark theme' : 'Light theme';
changeTheme(theme, text);
}
我知道这似乎有点业余,但你可以这样做,
<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>
并相应地更改按钮上的文本。如果有效,请告诉我。
一个简单的方法是:
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里面你可以把你的更改主题功能。