CSS变量如何与JS动态交互：通过setProperty实时修改变量值
其实，用 document.documentElement.style.setProperty() 来动态修改CSS变量，思路是对的，但关键在于细节。变量名、作用域、值格式，任何一个环节写错，都会导致修改“静默失效”——浏览器不报错，但样式就是纹丝不动。
为什么把 setProperty 写在按钮上，变量却“传”不出去？
这得从CSS变量的继承规则说起。伪元素（比如 ::before、::after）在读取变量时，会沿着DOM树向上查找。问题来了：如果你把变量 --icon-color 直接写在某个 .btn 元素的 style 属性里，那么这个变量就只“活”在这个按钮及其子元素的作用域内。它的 ::after 伪元素作为子级，当然能读到，但页面上的其他组件？根本看不见这个变量。
所以，要让修改全局生效，必须把变量定义在文档的“根”上，也就是 :root 选择器对应的 元素。相应地，用JS修改时，目标也得对准这个根元素：
document.documentElement.style.setProperty('--theme-bg', '#1a1a1a')✅ 全局可读，一改全变。btn.style.setProperty('--theme-bg', '#1a1a1a')❌ 变量被锁死在btn内部，出不去。document.body.style.setProperty('--theme-bg', '#1a1a1a')⚠️ 不推荐：body并非根元素，继承链可能在中间中断，导致部分元素读取失败。
setProperty 的变量名和值，有哪些必须遵守的“硬规则”？
这里的语法非常严格，拼错一个字符，或者格式不对，整个操作就等于白写。下面这些坑，几乎每个开发者都踩过：
立即学习“前端免费学习笔记（深入）”；
- 变量名必须带双横线：
setProperty('theme-bg', ...)是无效的，正确写法是'--theme-bg'。少两个短横线，浏览器就不认这是CSS变量。 - 值必须是合法的CSS值字符串：直接写数字
setProperty('--size', 16)会失败。你得告诉浏览器单位，写成'16px'或'1rem'才行。 - 大小写敏感：
--BgColor和--bgcolor在浏览器看来，完全是两个不同的变量。 - 注意空格：通过
getPropertyValue('--theme-bg')获取的值，首尾可能带有空格，直接比较可能会出错，记得用.trim()处理一下。
JS执行了，但样式没更新？先排查这三个地方
代码跑通了，页面却没反应？问题往往出在CSS的消费端，而不是JS的修改端：
- 缺少回退值（fallback）：CSS里写
color: var(--color)，如果--color未定义或值为空，浏览器会默默回退到inherit，看起来就像“没变”。安全的写法是加上默认值：color: var(--color, #333)。 - 变量作用域不对：如果变量最初是定义在某个
.card类里，那它的生效范围就仅限于这个类。在根上修改一个局部变量，自然不起作用。 - DevTools里搜不到变量：在开发者工具里搜索
--，如果看不到你定义的变量名，那基本可以断定，要么setProperty的目标元素错了，要么变量名拼错了——浏览器对这种错误通常是静默处理的。
在移动端或高频事件里，如何避免性能卡顿？
比如在 mousemove 或 scroll 事件中频繁调用 setProperty，很容易触发重排，导致页面卡顿、丢帧：
- 使用 requestAnimationFrame 节流：将样式更新操作放进
requestAnimationFrame回调中，让它与浏览器的绘制周期同步，这比用setTimeout或直接循环要高效得多。 - 优先使用百分比等相对值：对于鼠标跟随等效果，可以存储百分比值（如
--mouse-x-pct），在CSS中直接使用background-position: var(--mouse-x-pct)%，避免JS每次计算和传递具体的像素值。 - 在移动端注意事件延迟：在
touchmove事件中，如果漏掉e.preventDefault()，iOS等设备可能会延迟触发事件，造成坐标更新滞后，体验不跟手。
说到底，最容易被忽略的两个关键点，就是 fallback 和 作用域。变量明明写了却没生效，十有八九，是CSS里 var(--x) 后面缺了那个保底的默认值，或者，变量从一开始就没挂到真正全局的 :root 上去。
