在前端工程里，CSS自定义属性（也就是常说的CSS变量）已经成了主题切换和动态样式的核心手段。但当我们需要根据数据列表、用户状态或者组件实例去生成几十个带有不同前缀的变量时，单纯在样式表里写死显然不现实。这时候就要靠JavaScript在运行时拼出属性名并写入。
为什么需要拼接命名
设想一个后台系统中有多个卡片组件，每个卡片有自己的强调色、圆角和阴影强度。若统一用--theme-color这种全局名，后渲染的卡片会覆盖前面的设置。更合理的做法是给每个卡片加索引，例如--card-1-color、--card-2-radius。这些名字如果在JS里逐个手写，既容易拼错又不好维护。
利用JavaScript的变量和字符串拼接，可以把命名规则抽象出来。比如用cardIndex和propName两个变量，组合成完整的自定义属性名。这样新增属性类型时，只需调整规则函数，不用动具体赋值语句，也降低了样式冲突概率。
基础拼接与setProperty用法
CSS自定义属性在JS中通过element.style.setProperty(name, value)来设置，第一个参数就是完整的属性名，且必须包含开头的两条短横线。下面演示用模板字符串拼接命名的最简形式：
const card = document.querySelector('.card');
const index = 3;
const colorValue = '#2d8cf0';
// 拼接出 --card-3-color
const varName = `--card-${index}-color`;
card.style.setProperty(varName, colorValue);
console.log(card.style.getPropertyValue(varName)); // 输出 #2d8cf0
上面代码里，反引号配合${}把数字嵌进字符串，生成标准的CSS变量名。注意setProperty接收的是字符串，如果漏写前面的--，浏览器会把它当成普通内联样式属性，而不是自定义属性，导致在CSS里用var()取不到。
另外，拼接时建议统一用小写和短横线，不要使用驼峰。因为CSS自定义属性区分大小写，但很多CSS预处理器或团队规范默认全小写短横线，JS拼出--cardIndexColor后在样式里写成var(--card-index-color)就会失效。
循环场景下的批量注入
当有一组配置需要循环写入时，可以把命名规则和值都放在数据里，用forEach或map处理。这样逻辑清晰，也方便后期从接口动态拉取配置。
const themeConfig = [
{ idx: 1, color: '#ff9900', radius: '8px' },
{ idx: 2, color: '#19be6b', radius: '12px' }
];
themeConfig.forEach(item => {
const root = document.documentElement;
root.style.setProperty(`--block-${item.idx}-color`, item.color);
root.style.setProperty(`--block-${item.idx}-radius`, item.radius);
});
这段代码把变量挂到了document.documentElement也就是全局根元素上。如果只希望某个容器内部生效，就把root换成具体容器的引用。作用域不同，CSS里var()的继承路径也不同，局部设置可以避免污染其他模块。
从可维护性看，把前缀--block-提取成常量更好。例如const PREFIX = '--block-';然后拼`${PREFIX}${item.idx}-color`，一旦以后要改命名空间，只动一处即可。
常见误区与避坑
一个容易踩的坑是拼接时混用了中括号语法。有人会写card.style['--card-' + i + '-color'] = value，这在多数现代浏览器能跑，但属于非标准路径，某些旧版引擎不会触发自定义属性注册机制，也不如setProperty语义明确。
// 不推荐
card.style['--card-1-color'] = '#333';
// 推荐
card.style.setProperty('--card-1-color', '#333');
另一个问题是变量名来自用户输入或接口字段时，没做清洗。如果接口返回的属性片段含有空格或特殊符号，拼出来会变成非法CSS变量名。应在拼接前用正则过滤，例如const safe = raw.replace(/[^a-z0-9-]/gi, '')，保证只留字母数字和短横线。
最后提醒，动态设置的变量如果不再需要，要用removeProperty清理，否则堆积在DOM上会让元素的内联style越来越长，影响可读性和微小的渲染开销。
在CSS中消费拼接变量
JS写入之后，样式表或组件内部就可以用var()读取。由于名字是动态的，CSS里通常配合选择器或循环类来使用，例如：
.card-1 {
background-color: var(--card-1-color);
border-radius: var(--card-1-radius);
}
.card-2 {
background-color: var(--card-2-color);
border-radius: var(--card-2-radius);
}
如果卡片数量是动态的，也可以在CSS里用属性选择器配合通用名，或者由JS顺带把使用变量的类名也生成出来。核心原则始终是：JS负责把“名字和值”准确送到DOM，CSS只管按约定名字取用。
掌握拼接命名技巧后，主题定制、多实例配置、A/B样式测试都能用极少的代码完成，且逻辑层拥有完全的控制力。
CSS自定义属性JavaScript变量拼接CSS变量动态设置修改时间：2026-08-02 01:00:30