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

Answer 2

您的代碼無法正常工作，因為在您的代碼第一次運行時， style屬性沒有設置backgroundColor ： style表示元素的內聯樣式屬性，而您的元素沒有要開始的屬性。 當您檢查元素的背景是red還是gray ，兩者都不是，因為它沒有內聯樣式（ style.backgroundColor實際上是空字符串）。

您有幾個選擇：

• 使用getComputedStyle查看元素的background-color到底是什么，無論它是否設置為內聯。
• 提供一個默認情況，它會設置元素的background-color而不管它是否已經設置。 （如果是紅色，則將其切換為灰色；否則，將其設置為紅色。）

要么工作，要么做你需要做的事情； 這取決於您在解決方案中需要有多靈活，我將把它留給您。

Answer 3

所以這就是你的 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 to Hex 和 Hex to RGB這樣的函數來轉換 hex/rgb，或者你可以使用 rgb 代替並使其在大多數瀏覽器中工作 rgb(230, 230, 230) 和 rgb(254, 46, 46 OR the easy代碼少得多的事情是使用一個類，根本不用擔心顏色。

 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>

Answer 4

現在是 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，這是可以的，但是，也許其他具有其他顏色格式的瀏覽器，您需要對其進行測試。

Answer 5

這里需要引號。

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 替換了它）