Как переключаться между двумя документами CSS с помощью <button> в HTML
Я пытаюсь использовать темную тему и светлую тему на своей веб-странице, но не могу найти способ переключать их с помощью одной кнопки (поэтому 1-й щелчок кнопки включает темную тему, а 2-й раз выключает ее) . Я бы предпочел иметь возможность делать это без использования сторонней библиотеки 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 и JavaScript
@Rob "Я нашел способ сделать это..." - TO запрашивает кнопку для переключения между двумя состояниями
Используйте замыкание, глобальную переменную, проверьте значение атрибута href,...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я знаю, это кажется немного любительским, но вы можете сделать что-то вроде этого,
<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>
и соответствующим образом измените текст на кнопке. Дайте мне знать, если это работает.
Другой способ — использовать логическое значение. Вы можете изменить значение логического значения при каждом щелчке. И вы можете переключать 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);
}
Изменить на основе комментария
This does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"
Вы можете использовать ту же логику, например:
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);
}
это работает отлично, однако есть ли способ использовать document.getElementById("themeToggle").innerHTML = "New text!"; с этим, чтобы изменить кнопку между «темной темой» или «светлой темой»
Вау хороший ответ
Простой способ:
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 вы можете поместить свою функцию изменения темы.