JS使用setProperty修改:root CSS变量引用失效问题排查

AI 小北

2026-8-29

问题根因

修改后的代码失效是两个语法错误导致的：

引用CSS自定义属性（CSS变量）必须使用var()函数包裹，直接传入裸变量名时，浏览器会将其判定为非法属性值直接丢弃，不会生效
传入的变量名缺少CSS变量强制要求的双横杠--前缀：你在:root中定义的变量名是--onpxfont，而非onpxfont

修复方法

将所有setProperty调用的第二个参数，替换为var()包裹的完整CSS变量名即可，以10px字号选项为例：

onpx.onclick = function() {
  // 正确写法：传入var()包裹的带--前缀的变量
  document.documentElement.style.setProperty('--currentfont', 'var(--onpxfont)');
  onpx.classList.add('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.remove('active');
}

其余三个字号选项按相同规则修改即可，对应传入值分别为var(--onikipxfont)、var(--ondortpxfont)、var(--onaltipxfont)。

可选优化

当前代码中四个点击事件重复编写了类名移除/添加逻辑，可以抽离为公共函数减少冗余：

const fontOptions = [onpx, onikipx, ondortpx, onaltipx];
function setActiveFont(target) {
  fontOptions.forEach(el => el.classList.remove('active'));
  target.classList.add('active');
}

// 事件绑定可简化为
onpx.onclick = () => {
  document.documentElement.style.setProperty('--currentfont', 'var(--onpxfont)');
  setActiveFont(onpx);
}
onikipx.onclick = () => {
  document.documentElement.style.setProperty('--currentfont', 'var(--onikipxfont)');
  setActiveFont(onikipx);
}
ondortpx.onclick = () => {
  document.documentElement.style.setProperty('--currentfont', 'var(--ondortpxfont)');
  setActiveFont(ondortpx);
}
onaltipx.onclick = () => {
  document.documentElement.style.setProperty('--currentfont', 'var(--onaltipxfont)');
  setActiveFont(onaltipx);
}