Javascript Firefox是否忽略document.getElementById（id）.style.background？

我正在创建一个清单，这样当一个项目完成时，它可以被点击，背景变成“红色”。如果它被错误地标记为“红色”，则可以再次单击它，背景变为“无”。它在Chrome和Safari中非常有效。在Firefox中，它工作得很好，除非您试图撤销“红色”使其变为“无”。我怀疑这可能与颜色名称有关，而不是与特定的值有关，尽管我在FireFox中也遇到过这样的问题。这里是我用来做这件事的JS——根据需要无->红色->无

    function onMouseDown(id) {
      var squareColor = document.getElementById(id).style.background;
      if (squareColor === "red") {
        document.getElementById(id).style.background = "none";
        document.getElementById(id).style.color = "black";
      } else {
        document.getElementById(id).style.background = "red";
        document.getElementById(id).style.color = "white";
      }
    }

---

尝试在if语句中使用红色的十六进制颜色代码，而不是写入颜色名称。祝你好运

如果你尝试在Firefox中记录

样式

属性：

console.log(document.getElementById(id).style);

。。。您将看到它没有

background

属性。相反，它会分离

backgroundColor

、

backgroundImage

、

backgroundSize

等中的所有单独参数。这些分割属性存在于所有浏览器中，因此您可以执行以下操作：

函数onMouseDown（id）{ var square=document.getElementById（id）； if（square.style.backgroundColor==“红色”）{ square.style.background=“无”； square.style.color=“黑色”； }否则{ square.style.background=“红色”； square.style.color=“白色”； } }

---

点击我使用
…style.backgroundColor=“透明”取而代之。（我也会使用CSS类来代替）小提琴示例：谢谢@ChrisG，好东西。不是OP要求的。另外，以“try…”开头是一个评论，不是一个答案。我试着改成十六进制，但仍然是同一个问题，加上它在Chrome上破坏了它，所以不能改回无。谢谢，谢谢，布莱克斯！这解决了FF中的行为问题，并且仍然适用于Chrome和Safari。