В любом случае я могу уменьшить этот код? Я уже пытался сократить его до самого короткого, о котором только мог подумать. Существуют ли какие-либо возможные методы сокращения?
document.getElementById('switcher').addEventListener('click', (param1) => {
let dmbody = document.body.style;
let dmbutton = document.getElementById('switcher').style;
if (param1.target.value == "Off"){
param1.target.value = "On";
param1.target.textContent = "Dark";
dmbody.backgroundColor = "var(--darkbg-color)";
dmbody.color = "var(--darktxtcolor)";
dmbutton.backgroundColor = "var(--darkbg-color)";
dmbutton.color = "var(--darktxtcolor)";
dmbutton.setProperty("border", "1px solid #FFF");
} else {
param1.target.value = "Off";
param1.target.textContent = "Light";
dmbody.backgroundColor = "var(--lightbg-color)";
dmbody.color = "var(--lighttxtcolor)";
dmbutton.backgroundColor = "var(--lightbg-color)";
dmbutton.color = "var(--lighttxtcolor)";
dmbutton.setProperty("border", "1px solid #000");
}
})
<button id = "switcher" value = "Off">Light</button>
toggle
вам даже не понадобится оператор if
.
Хорошо. Это один момент, но я пытаюсь узнать, как хотя бы уменьшить эту функцию и извлечь из нее уроки; и если есть другой метод или правильная процедура, как я могу уменьшить что-то подобное.
Используйте CSS для стилизации элементов для каждой «темы», затем просто установите класс темы в теле:
document.getElementById('switcher').addEventListener('click', (param1) => {
let isDark = param1.target.value === "Off";
document.body.classList.toggle('dark', isDark);
param1.target.value = isDark ? "On" : "Off";
param1.target.textContent = isDark ? "Dark" : "Light";
})
body {
--lightbg-color: #FFF;
--lighttxtcolor: #000;
--darkbg-color: #111;
--darktxtcolor: #EEE;
background-color: var(--lightbg-color);
color: var(--lighttxtcolor);
}
#switcher {
background-color: var(--lightbg-color);
color: var(--lighttxtcolor);
border: 1px solid #000;
}
body.dark {
background-color: var(--darkbg-color);
color: var(--darktxtcolor);
}
body.dark #switcher {
background-color: var(--darkbg-color);
color: var(--darktxtcolor);
border: 1px solid #FFF;
}
<button id = "switcher" value = "Off">Light</button>
Или, если вы хотите сделать это более причудливо, вы можете использовать класс «тема» в теле для переключения значений переменных css:
document.getElementById('switcher').addEventListener('click', (param1) => {
let isDark = param1.target.value === "Off";
document.body.classList.toggle('dark', isDark);
param1.target.value = isDark ? "On" : "Off";
param1.target.textContent = isDark ? "Dark" : "Light";
})
body {
--bg-color: #FFF;
--txt-color: #000;
--border-color: #000;
}
body.dark {
--bg-color: #111;
--txt-color: #EEE;
--border-color: #EEE;
}
body {
background-color: var(--bg-color);
color: var(--txt-color);
}
#switcher {
background-color: var(--bg-color);
color: var(--txt-color);
border: 1px solid var(--border-color);
}
<button id = "switcher" value = "Off">Light</button>
Один из способов сократить код — изолировать проверку текущего целевого значения и этого значения в каждом отдельном изменении.
Также для упрощения я создал переменную color
, чтобы свести к минимуму рефакторинг изменений backgroundColor
и color
.
document.getElementById('switcher').addEventListener('click', (param1) => {
let dmbody = document.body.style;
let dmbutton = document.getElementById('switcher').style;
let isOff = param1.target.value == "Off";
let color = isOff ? "dark" : "light";
param1.target.value = isOff ? "On" : "Off";
param1.target.textContent = isOff ? "Dark" : "Light";
dmbody.backgroundColor = `var(--${color}bg-color)`;
dmbody.color = `var(--${color}txtcolor)`;
dmbutton.backgroundColor = `var(--${color}bg-color)`;
dmbutton.color = `var(--${color}txtcolor)`;
dmbutton.setProperty("border", `1px solid ${isOff ? "#FFF" : "#000"}`);
})
Хотя это способ рефакторинга, я бы все же предпочел ответ @Cerbrus
Вы получите гораздо меньше кода JS, если будете использовать CSS для стилизации. Было бы намного проще поддерживать, а также.