尝试通过点击单元格来改变单元格的颜色。
单元格通常为灰色，第一次点击时应该变为红色。当我点击红色单元格时，它应该再次变为灰色。
2
1134function 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。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你的代码无法工作，因为当你的代码首次运行时，
style属性没有设置backgroundColor：style代表元素的内联样式属性，而你的元素在开始时没有内联样式。当你检查元素的背景是否为red或gray时，它既不是红色也不是灰色，因为它没有内联样式（style.backgroundColor实际上是空字符串）。你有几个选择：
getComputedStyle来查看元素的background-color，无论它是否内联设置。background-color。（如果是红色，将其切换为灰色；否则，将其设置为红色。）任何一种方法都可以实现你的需求，这取决于你在解决方案中需要多大的灵活性，我将留给你决定。
从
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>