CSS根变量动态更新失效：L00元素调用JS设置后不随变量变化

核心原因 #

这是典型的CSS样式优先级冲突导致的问题：

• 当你通过document.getElementById("L00").style.background给元素设置背景色时，相当于给L00添加了内联样式。内联样式的优先级是所有CSS规则里最高的，会直接覆盖元素通过var(--TAB00_COLOR)引用的CSS变量样式。
• 后续滑动滑块修改:root中的--TAB00_COLOR时，其他元素因为是通过CSS规则引用变量，会自动同步更新样式，但L00元素由于有高优先级的内联背景色，完全不会响应变量的变化。
• 而去掉那行初始化代码后，L00的背景色完全由CSS变量控制，所以变量变化时能正常同步更新。

解决办法 #

根据你的需求选择以下任意一种方案即可：

1. 直接通过CSS变量初始化
   把--TAB00_COLOR的初始值直接写在:root的CSS规则里，无需用JS设置元素内联样式：

   :root {
     --TAB00_COLOR: #xxxxxx; /* 填写你的初始颜色值 */
   }
   #L00 {
     background: var(--TAB00_COLOR);
   }
   

   页面加载时L00会自动应用初始变量值，后续修改变量也能实时更新。

2. 用JS初始化根变量而非内联样式
   如果必须通过JS做初始化逻辑，不要给元素加内联样式，直接修改根变量：

   function page_defaults() {
     // 替换原来的style.background设置逻辑
     document.documentElement.style.setProperty('--TAB00_COLOR', '#xxxxxx');
     // 其他初始化代码...
   }
   

   这样L00的背景色依然由CSS变量控制，后续滑块修改变量时自然会同步更新。

3. 同步更新内联样式（不推荐）
   如果一定要保留内联初始化的写法，在change_the_color()函数里，除了更新根变量，还要手动同步L00的内联背景色：

   function change_the_color() {
     // 你的现有逻辑：读取变量、修改、设置回根变量
     const newColor = /* 你计算后的新颜色值 */;
     document.documentElement.style.setProperty('--TAB00_COLOR', newColor);
     // 额外添加同步内联样式的代码
     document.getElementById("L00").style.background = newColor;
   }
   

   这种方法冗余度较高，不如前两种方案简洁。

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