style.backgroundColor 不起作用？

Question

试图通过单击来更改单元格的颜色。

单元格通常是灰色的，第一次点击它们应该变成红色。当我单击红色单元格时，它应该再次变为灰色。

function changeColor(cell) {
  var red = '#FE2E2E';
  var grey = '#E6E6E6';

  if (cell.style.backgroundColor == grey) {
    cell.style.backgroundColor = red;
  } else {
    if (cell.style.backgroundColor == red) {
      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>

我也试过用.style.bgColor，rgb并if (cell.style.backgroundColor ===但这也不能工作。单元格背景颜色的值是.backgroundColor : ''或.bgColor : undefined。

Answer 1

您的代码无法正常工作，因为该属性在您的代码第一次运行时style没有设置：表示元素的内联样式属性，并且您的元素没有启动属性。当您检查元素的背景是否为或时，它都不是，因为它没有内联样式（实际上是空字符串）。backgroundColorstyleredgraystyle.backgroundColor

您有几个选择：

• 用于getComputedStyle查看元素的background-color实际内容，无论它是否设置为内联。
• 提供一个默认情况，它将设置您的元素，background-color无论它是否已经设置。（如果是红色，则将其切换为灰色；否则，将其设置为红色。）

要么可以工作并做你需要的事情；要么 这取决于您的解决方案需要多么灵活，我将把它留给您。

Answer 2

您返回的值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>