如何通过JS优雅修改toggle类的CSS规则，让新旧元素都应用新样式？

这是目前最简洁优雅的实现方案，完全不需要遍历DOM或修改样式表规则，几行代码就能满足所有需求：

步骤1：调整原有CSS规则 #

修改.colored类的背景色配置，使用CSS变量，第二个参数为默认 fallback 值，用户未选色时自动生效：

.colored{
    background-color: var(--custom-cell-color, black);
}

步骤2：重写颜色选择器监听逻辑 #

不需要遍历所有单元格，仅修改根节点的CSS变量值即可：

colorPicker.addEventListener('input', (e) => {
    document.documentElement.style.setProperty('--custom-cell-color', e.target.value);
})

实现逻辑说明 #

CSS变量具有动态继承特性，根节点的变量值更新后，所有引用该变量的CSS规则都会自动同步生效：

• 已经添加了colored类的现有单元格会自动更新为新颜色
• 后续点击新增的带colored类的单元格，也会自动应用最新的颜色值
• 不需要任何额外的DOM操作，性能和可维护性都远高于遍历修改内联样式的方案

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