Javascript/HTML动态网格单元格选中及清除功能异常问题

问题核心原因 #

你写的clear函数仅修改了网格容器#grid的背景色，但用户点击单元格时给每个单元格单独设置了内联样式的背景色，内联样式优先级远高于容器的背景样式，且单元格元素是直接覆盖在容器上层的，因此容器颜色的修改完全不会影响已经被上色的单元格。

修复方案 #

修改clear函数，遍历所有网格单元格，清除它们的内联背景色即可，修改后的代码如下：

function clear() {
  const gridStartingColor = `rgba(231,231, 231, 222)`;
  // 先设置容器背景为初始色
  c.style.backgroundColor = gridStartingColor; 
  // 遍历所有单元格，清除各自的内联背景色
  document.querySelectorAll('.square').forEach(cell => {
    cell.style.backgroundColor = 'transparent';
    // 如果你没有给单元格加其他内联样式，也可以直接移除整个style属性：cell.removeAttribute('style')
  })
}

操作后所有单元格会回到初始透明状态，直接透出下方容器的背景色，和初始化效果完全一致。

可选优化点 #

你之前提到觉得用this.style.backgroundColor实现不够优雅，可以改用类名控制样式：

• 给点击选中的单元格加自定义类比如colored，在CSS里提前写好对应样式规则
• 清除时直接移除所有单元格的colored类即可，不用操作内联样式，后续维护成本更低

内容的提问来源于stack exchange，提问作者user17353920