如何在JavaScript中引用CSS变量？当前写法为何失效？

分两种场景处理，根据你的实际需求选择：

场景1：无需JS动态干预（优先推荐） #

如果不需要用JS动态修改变量，直接在CSS里完成变量赋值是最简单高效的方式。只要目标元素能访问到--server-clr的作用域（比如是main的子元素，或者你显式指定了作用域），直接在CSS里写：

/* 假设el的选择器是.target-el */
.target-el {
  --member-clr: var(--server-clr);
}

场景2：必须用JS动态设置 #

如果一定要通过JS动态完成赋值，你需要先获取--server-clr的计算后实际值，再赋值给--member-clr。因为setProperty的第二个参数只会被当作纯字符串，不会解析CSS的var()语法。

代码示例：

// 获取目标元素的计算样式，提取--server-clr的值并去除多余空格
const serverColorValue = getComputedStyle(el).getPropertyValue('--server-clr').trim();
// 将实际值赋值给--member-clr
el.style.setProperty('--member-clr', serverColorValue);

为什么原写法无效？ #

你之前的写法el.style.setProperty("--member-clr", var('--server-clr'))（或字符串形式的'var(--server-clr)'）存在核心问题：

• JS中不存在var()函数，直接写会报错；就算作为字符串传入，浏览器也会把它当作普通文本值，不会解析成CSS变量引用
• 元素的style属性内的变量值不会触发CSS变量的解析逻辑，浏览器只会把未识别的var(--xxx)字符串视为无效属性值。

内容的提问来源于stack exchange，提问作者anonymous internet