Javascript 在firefox中使用element.style.color

我有下面的JavaScript函数，它可以更改元素中的文本，作为一种内部清理，我还希望确保文本可读。因此，我为深色背景设置白色，否则设置黑色

现在，该代码在IE9和Chrome上正常工作，但由于某些原因，无法正确更改Firefox上的color属性。为什么会这样？Firefox不支持我访问颜色属性的方式吗

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));

    if (element.style.backgroundColor == "black"
          || element.style.backgroundColor == "purple"
          || element.style.backgroundColor == "blue") {
      element.style.color = "white";
    } else {
      element.style.color = "black";
    }
}

---

为什么不改用类呢

.blackBackground {
    background-color: black;
    color: white;
}
.purpleBackground {
    background-color: purple;
    color: white;
}

---

…等等

啊，所以最后的问题是区分大小写

---

“黑”不等于“黑”。首先应该意识到：）

仅仅是一个想法，

元素。firstChild

是否曾经变成

null

？是否可以将其设置为空文本节点或类似的内容？

您正在检查，而条件类似

 while (element.firstChild!==null)//wrong

应该是

   while (element.firstChild!=null)

或者干脆

while (element.firstChild)

---

我建议您使用Firebug的脚本调试器，并在

if

语句中设置断点。查看实际返回者的

element.style.backgroundColor

内容。Firebug是一个很好的小工具，刚抓住它。不幸的是，无论出于何种原因，它都无法到达“appendChild”行或更高的级别。这很奇怪。我尝试在while循环中添加括号，这对调试器有一定的影响，但没有效果。奇怪的是，尽管文本按预期发生了变化，但调试器本身并没有显示这些变化！编辑：没关系，反正我可以用手表来评估它。如果它从来没有达到那一行，应该有一个错误或异常。我会检查Firebug的

控制台
选项卡。您可能会将while循环&appendChild代码替换为：
element.innerHTML=text。但我离题了，函数是否被调用（您可以在其中放置一个alert（），或者使用调试器检查…）您在哪里将“白色”与任何东西进行比较？很好，更新了解释以反映问题中使用的代码片段。一个好主意，但是颜色本身来自页面上其他地方的JavaScript对象。想象一下，我有一堆汽车物体，每辆汽车都有一种颜色，我用汽车的颜色来设置这个文本区域的背景/前景颜色。难道每辆汽车都不能有一个背景颜色类吗？可以，但目前我正在处理我可以支配的物体。这是一个方便的东西，在未来使用，虽然我应该加强我的对象。出于好奇，我将如何将该类的全部内容（即背景和前景）应用于元素？@f1dave只需将该类添加到元素
element.className=“blackBackground”
不完全如此。请在此阅读有关！==运算符…使用类型比较运算符是完全有效的