Javascript 切换<；td>；背景色和fontcolor同时使用

我在这里有一个简单的表格，我可以在点击时切换背景色

下面的代码在单击时来回切换背景色。我还需要在点击时以相同的方式切换字体颜色（除了背景色切换）。默认字体颜色为白色，单击时为黑色，再次单击时为白色。 代码如下所示：

window.onload=function（）{
var all=document.getElementsByTagName（“td”）；
对于（变量i=0；i

.rep{
边框：1px实心#CCC；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：白烟；
边界塌陷：塌陷；
宽度：10%；
利润率：10px；
浮动：左；
左边距：45像素；
}
运输署署长{
填充：2px；
保证金：2倍；
边框：1px实心#ccc；
文本对齐：居中；
高度：17px；
宽度：17px；
}

1.
2.
3.

JavaScript:

if(variable) {
  element.style.backgroundColor = "firstBGColor";
  element.style.color = "firstFGColor";
} else {
  element.style.backgroundColor = "secondBGColor";
  element.style.color = "secondFGColor";
}
variable = !variable

jQuery:

$（“body”）.css（“背景色”、“蓝色”）.css（“颜色”、“白色”）

此jQuery代码“同时”更改背景色和body的颜色

首选： 但我建议创建类和设置并删除它们。它使代码更易于维护

if(variable) {
  element.className = "firstClass";
} else {
  element.className = "secondClass";
}
variable = !variable

**CSS**
.firstClass {
  background-color: firstBGColor;
  color: firstFGColor
}
.secondClass {
  background-color: secondBGColor;
  color: secondFGColor
}

---

JavaScript:

if(variable) {
  element.style.backgroundColor = "firstBGColor";
  element.style.color = "firstFGColor";
} else {
  element.style.backgroundColor = "secondBGColor";
  element.style.color = "secondFGColor";
}
variable = !variable

jQuery:

$（“body”）.css（“背景色”、“蓝色”）.css（“颜色”、“白色”）

此jQuery代码“同时”更改背景色和body的颜色

首选： 但我建议创建类和设置并删除它们。它使代码更易于维护

if(variable) {
  element.className = "firstClass";
} else {
  element.className = "secondClass";
}
variable = !variable

**CSS**
.firstClass {
  background-color: firstBGColor;
  color: firstFGColor
}
.secondClass {
  background-color: secondBGColor;
  color: secondFGColor
}

试试这个代码

$（函数（）{
$（“td”）。单击（函数（）{
if（$（this.css（'background-color'）=='rgb（154201157'））{
$（this.css（'background-color'，'#fff'））
$（this.css（'color'，'white'））
}否则{
$（this.css（'background-color'，'rgb（154201157）'））
$（this.css（'color'，'black'））
}
});
});
.rep{
边框：1px实心#CCC；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：白烟；
边界塌陷：塌陷；
宽度：10%；
利润率：10px；
浮动：左；
左边距：45像素；
} 
运输署署长{
填充：2px；
保证金：2倍；
边框：1px实心#ccc；
文本对齐：居中；
高度：17px；
宽度：17px；
}

1.
2.
3.
试试这段代码


$（函数（）{
$（“td”）。单击（函数（）{
if（$（this.css（'background-color'）=='rgb（154201157'））{
$（this.css（'background-color'，'#fff'））
$（this.css（'color'，'white'））
}否则{
$（this.css（'background-color'，'rgb（154201157）'））
$（this.css（'color'，'black'））
}
});
});
.rep{
边框：1px实心#CCC；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：白烟；
边界塌陷：塌陷；
宽度：10%；
利润率：10px；
浮动：左；
左边距：45像素；
} 
运输署署长{
填充：2px；
保证金：2倍；
边框：1px实心#ccc；
文本对齐：居中；
高度：17px；
宽度：17px；
}

1.
2.
3.
为什么不在一个类中定义颜色，然后添加和删除该类？这样编码和维护就容易多了too@Pete当然是正确的，但是如果出于任何原因您不想这样做，您可以在设置
backgroundColor
后立即设置
tdElm.style.color
。（同时：这个问题用jQuery标记，但显示的javascript是普通的，没有特别的理由将其转换为（或描述为）jQuery。）你能使用jQuery吗？！我不明白，为什么不使用toggleClass而不是一堆代码呢？顺便说一句，我在你的代码中没有看到任何jQuery。不，我不能使用jQuery。为什么不在一个类中定义颜色，然后添加和删除该类？这样编码和维护起来会容易得多too@Pete当然是正确的，但是如果出于任何原因你不想这么做，您可以在设置
backgroundColor
后立即设置
tdElm.style.color
。（同时：这个问题用jQuery标记，但显示的javascript是普通的，没有特别的理由将其转换为（或描述为）jQuery。）你能使用jQuery吗？！我不明白，为什么不使用toggleClass而不是一堆代码呢？顺便说一句，我在你的代码中没有看到任何jQuery。不，我不能使用jQuery。