直接调用 element.style.setproperty() 修改 css 变量需确保目标元素正确、变量名带--前缀且大小写准确、值为合法css字符串；无fallback或作用域不匹配会导致静默失效。
直接调用 element.style.setProperty() 就能改 CSS 变量，但必须写对目标元素、变量名格式和值类型，否则静默失败——浏览器不报错，样式也不变。
为什么 setProperty 改了但页面没反应
不是 JS 没执行，而是 CSS 层面没接住：
-
var(--color)没写 fallback（比如var(--color, #333)），变量未定义时会退到 inherit，看起来“没变” - 变量定义在局部（如
.card { --bg: white; }），却试图用document.documentElement.style.setProperty()去改——作用域不匹配，改了也白改 - DevTools 里搜不到该变量？说明
setProperty的目标元素错了，或变量名拼错（大小写敏感、漏--、多空格）导致被忽略
改哪个元素？documentElement 还是具体 element
取决于你要控制的作用域范围：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 全站主题色、字体大小等全局配置 → 用
document.documentElement.style.setProperty() - 只影响某个组件（比如一个进度条、弹窗）→ 获取对应
element再调element.style.setProperty() - 别用
document.body.style.setProperty()：body 不是根，继承链可能中断，尤其在 Shadow DOM 或复杂嵌套下容易失效
setProperty 的参数有哪些硬性要求
拼错一个字符就无效，且全部静默：
- 变量名必须带两个短横线前缀：
'--theme-bg'✅，'theme-bg'❌，'-theme-bg'❌ - 值必须是合法 CSS 字符串：
'16px'✅，16❌，'1rem'✅，1❌ - 大小写敏感：
'--BgColor'和'--bgcolor'是两个不同变量 - 如果想让新变量引用另一个变量，值得写成
'var(--primary-color)'，不能只传'--primary-color'
高频修改时怎么避免卡顿
比如在 scroll 或 mousemove 中实时更新 --scroll-y 或 --mouse-x：
- 用
requestAnimationFrame节流，别裸写循环或setTimeout - 坐标类变量优先存百分比（如
--mouse-x-pct），CSS 里直接用background-position: var(--mouse-x-pct)%, 50%，省去 JS 算像素 - 移动端
touchmove必须加e.preventDefault()，否则 iOS 会延迟触发，造成坐标滞后 - 连续设多个变量时，缓存
element.style引用，减少 DOM 访问开销
最容易被忽略的是 fallback 和作用域——变量写了但没 fallback，或者改了 :root 却忘了组件自己内联覆盖了同名变量，结果一切看起来都“不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
