必须用getComputedStyle(el).getPropertyValue('--name')读取CSS变量，带--前缀且返回字符串；修改需el.style.setProperty('--name', 'value')，仅作用于该元素及其后代。
如何用 getComputedStyle 读取 CSS 变量值
直接读取 CSS 变量不能靠 element.style，它只返回内联样式；必须通过 getComputedStyle 获取计算后样式，再用 getPropertyValue 提取变量值。
注意变量名要带 -- 前缀，且大小写敏感：
const el = document.querySelector('#box');
const styles = getComputedStyle(el);
const color = styles.getPropertyValue('--main-color').trim(); // 返回字符串，可能含空格
- 如果变量未定义，
getPropertyValue返回空字符串（不是undefined） - 嵌套变量（如
--bg: var(--color)）会被自动解析，返回最终计算值 - 伪元素（如
::before）需传第二个参数：getComputedStyle(el, '::before')
怎样用 style.setProperty 修改 CSS 变量
修改只能作用于某个 DOM 元素及其后代，通过该元素的 style 对象设置：
el.style.setProperty('--main-color', '#ff6b6b');
- 值必须是字符串，即使设数字也要加引号：
el.style.setProperty('--z-index', '999') - 不能省略
--前缀，否则会被当成普通 CSS 属性处理 - 修改后会立即触发重绘，但不会影响其他元素（除非它们继承该变量）
- 若想全局修改，应操作
:root的style：document.documentElement.style.setProperty(...)
为什么 setProperty 不生效？常见原因
多数“改了没反应”问题出在作用域或拼写上：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- CSS 变量名拼错（比如少一个
-、大小写不一致），浏览器静默忽略 - 目标元素没声明该变量，且父级也没提供继承链（CSS 变量不继承，只级联）
- 在
DOMContentLoaded之前执行 JS，querySelector找不到元素 - 用
el.style.color = 'red'这类方式试图覆盖变量——无效，变量优先级更高 - 某些框架（如 Vue）的 scoped style 会加属性选择器，导致 :root 变量无法穿透到组件内部
读写封装成函数时要注意什么
简单封装能提升复用性，但得处理边界情况：
function setCssVar(el, name, value) {
if (!name.startsWith('--')) name = '--' + name;
el.style.setProperty(name, value);
}
function getCssVar(el, name) {
if (!name.startsWith('--')) name = '--' + name;
return getComputedStyle(el).getPropertyValue(name).trim();
}
- 别在函数里默认操作
:root，显式传入document.documentElement更安全 - 读取时建议加 fallback 判断：
if (!color) console.warn(`CSS var ${name} is empty`) - 批量读写多个变量时，避免反复调用
getComputedStyle，它有性能开销
最易被忽略的一点：CSS 变量值是字符串，哪怕你设的是 1.5 或 bold，读出来都是字符串，做数值运算前记得 parseFloat 或 parseInt。
