javascript中用style.setproperty可动态修改css自定义变量，需传入带--前缀的变量名和字符串值，作用域限于调用元素；全局修改用document.documentelement.style.setproperty；批量设置可用封装函数；值必须为带单位的字符串。
JavaScript 中用 style.setProperty 动态修改 CSS 自定义变量，核心是操作元素的 style 对象，传入变量名（带 -- 前缀）和新值即可。
基础语法：直接设置单个变量
自定义变量本质是 CSS 属性，只是名字以 -- 开头。调用 element.style.setProperty() 时，第一个参数写完整变量名（如 --primary-color），第二个参数传字符串形式的值：
const box = document.querySelector('.box');
box.style.setProperty('--primary-color', '#3498db');
这会为 .box 元素内联设置该变量，后续用 var(--primary-color) 的样式将立即响应变化。
作用域很重要：改的是哪个元素的变量？
setProperty 修改的是**调用它的那个 DOM 元素的 style 属性**，不是全局或 document 根节点：
- 想影响整个页面？用
document.documentElement.style.setProperty() - 只影响某个组件？用该组件容器元素的
style - 改 body？用
document.body.style.setProperty()
例如切换主题色到深色模式：
document.documentElement.style.setProperty('--bg-color', '#121212');
document.documentElement.style.setProperty('--text-color', '#ffffff');
批量设置多个变量更简洁
频繁修改多个变量时，逐行调用 setProperty 显得冗长。可以用 Object.entries() 配合循环，或封装一个工具函数：
function setCSSVars(element, vars) {
Object.entries(vars).forEach(([key, value]) => {
element.style.setProperty(key, value);
});
}
// 使用
setCSSVars(document.documentElement, {
'--accent': '#e74c3c',
'--radius': '8px',
'--shadow': '0 2px 10px rgba(0,0,0,0.1)'
});
注意值的类型和单位
CSS 自定义变量的值是纯字符串，不自动补单位或做类型转换：
- 颜色写
'#ff6b6b'或'rgb(255, 107, 107)'，别漏引号 - 长度必须带单位，比如
'24px'、'1.5rem'，不能只写24 - 数字型变量（如用于
calc()）也要转成字符串：setProperty('--gap', '16')❌，应写'16px'✅
如果变量值来自用户输入或计算结果，记得显式拼接单位：
const size = 14;
element.style.setProperty('--font-size', size + 'px');
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
