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

Question

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

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>

Answer 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'а, так вам будет проще работать с цветами.

Answer 2

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

<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>

БЛОГ НА HUSL

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

Ответы (2 шт):

Внимание