Как я могу обновить многие свойства элемента, не перечисляя их по отдельности в 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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

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