点击汉堡菜单图标无法动态修改伪元素背景色问题求助

常见失效原因及修正方案 #

1. CSS变量获取方式错误

直接通过root.style.getPropertyValue()只能读取行内样式中定义的变量，而你在:root中声明的变量属于样式表定义，必须用getComputedStyle()获取计算后的实际值，同时注意返回值可能包含空格，需要用trim()处理。

2. 变量设置语法疏漏

设置CSS变量时，必须通过style.setProperty()方法，且属性名要完整带--前缀，值的格式要符合CSS规范。

3. 初始值判断逻辑错误

如果获取的变量值带空格（比如返回" yellow "），直接和"yellow"比较会不相等，导致切换逻辑无法触发，所以必须先去除首尾空格。

修正后的完整代码示例 #

CSS 代码

:root {
  --pseudo-backgroundcolor: yellow;
}

.menu__icon {
  position: relative;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.menu__icon span,
.menu__icon::before,
.menu__icon::after {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--pseudo-backgroundcolor);
  transition: background-color 0.3s;
}

.menu__icon::before {
  content: '';
  top: 0;
}

.menu__icon span {
  top: 50%;
  transform: translateY(-50%);
}

.menu__icon::after {
  content: '';
  bottom: 0;
}

JavaScript 代码

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const menuIcon = document.querySelector('.menu__icon');
  const root = document.documentElement;

  // 获取初始变量值并去除空格
  let currentColor = getComputedStyle(root)
    .getPropertyValue('--pseudo-backgroundcolor')
    .trim();

  menuIcon.addEventListener('click', () => {
    if (currentColor === 'yellow') {
      root.style.setProperty('--pseudo-backgroundcolor', 'white');
      currentColor = 'white';
    } else {
      root.style.setProperty('--pseudo-backgroundcolor', 'yellow');
      currentColor = 'yellow';
    }
  });
});

补充：Switch 版本逻辑 #

如果想用switch实现切换，同样要注意变量值的处理：

menuIcon.addEventListener('click', () => {
  switch(currentColor) {
    case 'yellow':
      root.style.setProperty('--pseudo-backgroundcolor', 'white');
      currentColor = 'white';
      break;
    case 'white':
      root.style.setProperty('--pseudo-backgroundcolor', 'yellow');
      currentColor = 'yellow';
      break;
  }
});

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