为什么我的背景不会在点击十六进制颜色时发生变化？

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>

如果您需要匹配颜色，最安全的方法是创建一个具有相同背景颜色的临时元素，从该元素和您正在检查的元素中读取颜色，然后进行比较看看它们是否相同；无论浏览器碰巧使用的字符串表示形式如何，这都将起作用。