点击气球切换颜色异常：首次console log颜色为空且显示蓝色而非绿色

可能的原因 #

1. 样式读取方式错误：你大概率是用了element.style.backgroundColor来获取气球颜色，但这个属性只能读取内联样式（也就是写在HTML元素style属性里的样式），而你的绿色是通过CSS类/选择器设置的，所以首次点击时自然拿到空值。
2. 切换逻辑的默认值漏洞：因为首次获取到空值，你的切换代码可能默认触发了“空值时设为蓝色”的逻辑，导致气球直接跳转到蓝色，而非从绿色开始切换。

解决步骤 #

• 改用计算样式获取初始颜色：不要直接读style属性，而是用window.getComputedStyle(element)来获取元素最终渲染的计算样式，这样能拿到CSS里设置的绿色。示例代码：

  const balloon = document.querySelector('.balloon');
  balloon.addEventListener('click', () => {
    // 获取计算后的背景色（通常返回RGB格式，比如rgb(0, 128, 0)）
    const currentColor = window.getComputedStyle(balloon).backgroundColor;
    console.log(currentColor); // 首次点击会正确输出绿色的RGB值
    // 切换颜色逻辑
    if (currentColor === 'rgb(0, 128, 0)') {
      balloon.style.backgroundColor = 'blue';
    } else {
      balloon.style.backgroundColor = 'green';
    }
  });
  

• 用类切换替代手动颜色判断（更推荐）：这种方式不需要读取颜色值，直接通过CSS类的切换来改变样式，更健壮也更简洁：

  const balloon = document.querySelector('.balloon');
  balloon.addEventListener('click', () => {
    balloon.classList.toggle('blue-balloon');
  });
  

  对应的CSS：

  .balloon {
    background-color: green;
  }
  .blue-balloon {
    background-color: blue;
  }
  

• 检查CSS优先级：确保初始绿色样式没有被其他更高优先级的样式（比如内联样式、带ID的选择器）覆盖，保证绿色能正常应用到气球上。

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