如何在运行时通过JS更改CSS变量来实时调整布局？

应使用 CSS 变量接管网格列数等动态参数，而非直接修改 grid-template-columns 字符串；通过 setProperty 修改 –grid-col-count 等变量，配合 minmax() 保持响应式逻辑，注意作用域、拼写及 IE 兼容性。

直接改 grid-template-columns 字符串会破坏响应式逻辑

很多人一上来就写 element.style.gridTemplateColumns = 'repeat(4, 1fr)'，结果发现原本带 minmax() 或 auto-fit 的响应式网格在小屏下直接崩了。这是因为 JS 覆盖的是整个声明值，把 CSS 里写的弹性逻辑全抹掉了。更麻烦的是，如果多个容器共用同一套类名，你得挨个查、挨个设，漏一个就样式不一致。

用 CSS 变量接管“可变参数”，JS 只负责设值

核心是把真正需要动态的部分抽出来：列数、列宽、间隙这些数值型参数，而不是整条 grid-template-columns 声明。比如：

:root {
  --grid-col-count: 3;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-col-count), minmax(200px, 1fr)));
  gap: var(--grid-gap, 12px);
}

这样 JS 只需改数字：

const grid = document.querySelector('.grid');
grid.style.setProperty('--grid-col-count', '5');

• repeat() 内部支持 var(--grid-col-count)，但不支持嵌套 var()（比如 repeat(3, var(--col-width)) 在部分旧浏览器会失效）
• 变量定义在 :root 就用 document.documentElement.style.setProperty()；定义在具体元素上，就得调该元素的 .style.setProperty()
• 变量名必须带双短横线前缀，--grid-col-count 写成 -grid-col-count 或 grid-col-count 都无效

批量更新多个变量时别循环调 setProperty

频繁修改单个变量（比如滚动中实时更新 --scroll-y）可能掉帧，不是因为方法错，而是浏览器要重算所有依赖该变量的样式。批量改时，用 Object.entries(vars).forEach(([k, v]) => el.style.setProperty(k, v)) 比逐个调略好，但差异微乎其微——真正影响性能的是改的频率和变量被多少属性引用，而不是调用次数。

立即学习“前端免费学习笔记（深入）”；

容易被忽略的一点：setProperty 不触发重排，但会触发重绘；如果变量控制的是 background-color 或 box-shadow 这类 paint 层属性，高频更新照样卡。建议配合 requestAnimationFrame 节流，尤其在 mousemove 或 scroll 事件里。

读不到变量值？先检查作用域和拼写

getComputedStyle(el).getPropertyValue('--my-var') 返回空字符串，大概率不是 JS 问题：

• 变量根本没在对应作用域定义（比如在 .card 里定义了 --bg，却去 document.documentElement 上读）
• 拼写错误：大小写敏感、多一个空格、少一个短横线（--color ≠ --Color ≠ -color）
• DOM 还没挂载就调用了 setProperty（比如 document.body 尚未 append 到 document 时就设变量，静默失败）

IE 完全不支持 CSS 变量，如果项目还需兼容，得引入 css-vars-ponyfill，但注意它无法支持 var() 嵌套或动画。