„Warum hat style.backgroundColor keine Auswirkung?“

Question

Versuchen Sie, die Farbe einer Zelle zu ändern, indem Sie darauf klicken.

Die Zelle ist normalerweise grau und sollte beim ersten Klicken rot werden. Wenn ich auf die rote Zelle klicke, sollte sie wieder grau werden.

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

  if (cell.style.backgroundColor == grey) {
    cell.style.backgroundColor = rot;
  } anders {
    if (cell.style.backgroundColor == red) {
      cell.style.backgroundColor = grey;
    }
  };
};

#table tr td {
  Breite: 20px;
  Höhe: 50px;
  Cursor: Zeiger;
  Hintergrundfarbe: #E6E6E6;
  Rand: 1 Pixel einfarbig schwarz;
}

<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>

Ich habe auch .style.bgColor, rgb und if (cell.style.backgroundColor === , aber auch diese funktionierten nicht. Der Wert der Zellenhintergrundfarbe wurde entweder in .backgroundColor:'' oder in übergeben. bgColor< /em>: undefiniert

Answer 1

你的代码无法工作，因为当你的代码首次运行时，style属性没有设置backgroundColor： style代表元素的内联样式属性，而你的元素在开始时没有内联样式。当你检查元素的背景是否为red或gray时，它既不是红色也不是灰色，因为它没有内联样式（style.backgroundColor实际上是空字符串）。

你有几个选择：

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

任何一种方法都可以实现你的需求，这取决于你在解决方案中需要多大的灵活性，我将留给你决定。

Answer 2

从style.backgroundColor获取的值可能不会以与设置时相同的格式返回；它以浏览器希望的任何格式呈现。

一种最小更改的方法是在元素上存储一个标志（参见注释）：

function changeColor(cell) {
  var red = '#FE2E2E';
  var grey = '#E6E6E6';
  
  // 获取标志；如果不存在，则为假值
  var flag = cell.getAttribute("data-grey");

  if (!flag) {
    // 变为灰色
    cell.setAttribute("data-grey", "true");
    cell.style.backgroundColor = red;
  } else {
    // 不是灰色，变为红色
    cell.setAttribute("data-grey", ""); // 空值为假值
    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>