Как я могу обновить многие свойства элемента, не перечисляя их по отдельности в JavaScript?

В любом случае я могу уменьшить этот код? Я уже пытался сократить его до самого короткого, о котором только мог подумать. Существуют ли какие-либо возможные методы сокращения?

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>

Вы получите гораздо меньше кода JS, если будете использовать CSS для стилизации. Было бы намного проще поддерживать, а также.

VLAZ 21.11.2022 16:14
Переключить один класс на родительском узле с помощью classList API. Все остальное определите в CSS. С методом toggle вам даже не понадобится оператор if.
Sebastian Simon 21.11.2022 16:16

Хорошо. Это один момент, но я пытаюсь узнать, как хотя бы уменьшить эту функцию и извлечь из нее уроки; и если есть другой метод или правильная процедура, как я могу уменьшить что-то подобное.

William C 21.11.2022 16:18
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
3
3
88
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте 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

Другие вопросы по теме