style.backgroundColor 不起作用? [英] style.backgroundColor doesn't work?

问题描述

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

Tried to change the color of a cell by clicking on it.

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

The cells are normaly grey and by the first click they should turn red. When I click on a red cell it should turn grey again.

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.

I also tried with .style.bgColor, rgb and if (cell.style.backgroundColor === but this didn't work either. The value of the cells background color is either by .backgroundColor : '' or by .bgColor : undefined.

推荐答案

您从 style.backgroundColor 返回的值可能与您设置的格式不同；它是浏览器想要制作的任何格式.

The value you get back from style.backgroundColor isn't likely to be in the same format you set it in; it's in whatever format the browser wants to make it.

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

One minimal change approach is to store a flag on the element (see comments):

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 相应地设置样式(见评论):

...but the right thing to do is add/remove classes and use CSS to style accordingly (see comments):

// 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 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！