как сделать чтобы по второму нажатию стили возвращались обратно

Рейтинг: 0Ответов: 2Опубликовано: 18.01.2023

по нажатию оно меняет фон на черный, но по следующему нажатию не возвращает обратно

theme.addEventListener('click', ()=>{
    if(document.body.style.backgroundColor !== '#000'){
        document.body.style.backgroundColor = '#000';
    }
    else {
        document.body.style.backgroundColor = '#fff';
    }
});
<button id="theme">Change Theme</button>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 3

Если вы откроете девтулз в браузере, то увидите, что получается, когда вы назначаете стили:

<body style="background-color: rgb(0, 0, 0);">

То есть браузер записывает не именно ваш цвет, а переводит в другой формат. Именно поэтому обратно цвет не меняется. Так что один вариант -- это исправить на другое название цвета, как написал ΝNL993.

Но обычно такие вещи делают через изменение классов стилей. Вот так:

const THEME_CLASS = 'body_dark';
const body = document.body;

theme.addEventListener('click', ()=>{
  body.classList.toggle(THEME_CLASS);
});
.body_dark {
  background-color: #000;
}
<button id="theme">Change Theme</button>

▲ 1

Вероятно вам стоит использовать window.getComputedStyle, чтобы все цвета были в одном формате. (window.getComputedStyle возвращает формат цветов RGB)

theme.addEventListener('click', () => {
  let styles = window.getComputedStyle(document.body)

  if(styles.backgroundColor !== 'rgb(0, 0, 0)'){
    document.body.style.backgroundColor = '#000';
  } else {
    document.body.style.backgroundColor = '#fff';
  }
});
<button id="theme">Change Theme</button>

Внимание

Вам также стоит перейти на формат цветов RGB/RGBA, вместо HEX'а, так вам будет проще работать с цветами.