风格.backgroundColor不行

您从style.backgroundColor返回的值不太可能与您设置的格式相同;它是浏览器想要的任何格式。

一个最小的改变方法是在元素上存储一个标志(见注释):

function changeColor(cell) {
  var red = '#FE2E2E';
  var grey = '#E6E6E6';
  
  // Get a flag; will be falsy if not there at all
  var flag = cell.getAttribute("data-grey");
  if (!flag) {
    // Make it grey
    cell.setAttribute("data-grey", "true");
    cell.style.backgroundColor = red;
  } else {
    // Not grey, make it red
    cell.setAttribute("data-grey", ""); // blank is falsy
    cell.style.backgroundColor = grey;
  }
}

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}

<table class="table table-bordered" id="table">
  <tbody>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

…但正确的做法是添加/删除类，并使用相应的CSS样式(见注释):

// See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList for classList info
function changeColor(cell) {
  // adds or removes the active class
  cell.classList.toggle("active");
}

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}
/* A class we can toggle to override the color above */
#table tr td.active {
  background-color: #fe2e2e;
}

<table class="table table-bordered" id="table">
  <tbody>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

你的代码不工作，因为style属性没有一个backgroundColor设置当你的代码第一次运行:style代表一个元素的内联样式属性，你的元素没有一个开始。当你检查元素的背景是red还是gray时，它都不是，因为它没有内联样式(style.backgroundColor实际上是空字符串)。

你有几个选择:

• 使用getComputedStyle来查看元素的background-color实际是什么，无论它是否设置为内联
• 提供一个默认的情况，将设置你的元素的background-color，不管它是否已经设置。(如果是红色，切换到灰色;否则设置为红色)

任何一个都可以工作并做你需要的事情;这取决于你的解决方案有多灵活，我把这个留给你。

所以这就是你的if/else应该写的，你不应该在你的else里面有检查。现在，console.log将显示代码失败的原因。在大多数浏览器中，backgroundColor检查将返回rgb，而不是十六进制。

…这不是故意的…

function changeColor(cell) { 
  var red = '#FE2E2E';
  var grey = '#E6E6E6';
  console.log(cell.style.backgroundColor);  //rgb(230, 230, 230)
  if (cell.style.backgroundColor == grey) {
    cell.style.backgroundColor = red;
  } else {
      cell.style.backgroundColor = grey; 
  }
};

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}
 

<table class="table table-bordered" id="table">
  <tbody>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

那么你能做什么呢?使用像RGB到十六进制和十六进制到RGB这样的函数来转换十六进制/RGB，或者你可以使用RGB代替，使它在大多数浏览器RGB(230,230,230)和RGB(254,46,46)中工作，或者代码少得多的简单事情是使用一个类，根本不用担心颜色。

function changeColor(cell) { console.log(cell);
  cell.classList.toggle("selected");
};

#table tr td {
  width: 20px;
  height: 50px;
  cursor: pointer;
  background-color: #E6E6E6;
  border: 1px solid black;
}
#table tr td.selected {
  background-color: #FE2E2E;
}

<table class="table table-bordered" id="table">
  <tbody>
    <tr>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
      <td onclick="changeColor(this)"></td>
    </tr>
  </tbody>
</table>

现在2020，我找到了真正的解决方案:

function changeColor(cell) {
  var red = "rgba(255, 4, 10, 1)"; //rgba or rgb, so if you really want to use this, you need use regexp. 
  var grey = "rgba(230, 230, 230, 1)"; //pls change your css to this too.

  var style = cell.computedStyleMap().get('background-color').toString();
  if (style == grey) {
    cell.style.backgroundColor = red;
  } else  if (style == red) {
    cell.style.backgroundColor = grey; 
  };

对于chrome浏览器这是可以的，但是，也许其他浏览器的其他颜色格式，你需要测试它

这里需要引号。

function changeColor(cell) {
  if (cell.style.backgroundColor == "grey") {
    cell.style.backgroundColor = "red";
  } else if (cell.style.backgroundColor == "red") {
    cell.style.backgroundColor = "grey";
  };
};

(我还擅自将else块中的if替换为else if)