Почему мой фон не изменится при нажатии на шестнадцатеричные цвета?

Question

У меня есть HTML-документ, в котором я хотел изменить цвет фона документа, нажав кнопку.

Это работает совершенно нормально, если я использую цвета, такие как «желтый», «синий»,"красный" и т. д.

Но когда я использую шестнадцатеричные цвета, такие как "# 000000", условие if, похоже, не замечает этот цвет и использует функцию else.

Если я использую«черный» вместо «# 000000» функция работает, а фон становится красным.

Я загрузил рабочий образец на jsfiddle.

Знаете ли вы, где ошибка?

https://jsfiddle.net/c2gv9x01/

<button>COLOR SWITCH</button>



<script>
window.onload=function(){
    document.querySelector("body").style.backgroundColor = '#000000';
    document.querySelector("button").addEventListener("click", color);
}

function color() {

    if (document.querySelector("body").style.backgroundColor == '#000000') 
{document.querySelector("body").style.backgroundColor = 'red'; }


     else {document.querySelector("body").style.backgroundColor = '#000000';}
}
</script>

Answer 1

Существует много разных строковых представлений для одного и того же цвета, поэтому простое сопоставление строки шестнадцатеричного цвета не обязательно будет работать, поскольку это не тот случай, когда ваш браузер использует его для сообщения:

window.onload = function() {
  let body = document.querySelector("body")
  body.style.backgroundColor = "#000000"
  console.log(body.style.backgroundColor) // rgb(0, 0, 0) in most browsers
}

Когда это возможно, старайтесь вообще не подбирать цвета;не все браузеры будут использовать одно и то же представление, так что переключение на rgb вместо hex не будет гарантированно работать.Вместо этого установите имя класса в элементе, который устанавливает нужные вам цвета, и вместо этого проверьте наличие этого имени класса:

window.onload = function() {
  document.querySelector("body").classList.add("black")
  document.querySelector("button").addEventListener("click", color);
}

function color() {
  let body = document.querySelector("body")
  if (body.classList.contains("black")) {
     body.classList.add("red")
     body.classList.remove("black")
  } else {
     body.classList.add("black")
     body.classList.remove("red")
  }
}

.black {
  background-color: #000
}

.red {
  background-color: #F00
}

<button>COLOR SWITCH</button>

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