JavaScript：if语句正常生效，else语句无法运行

嘿，这个问题我见过不少，大概率是浏览器对CSS颜色值的格式转换搞的鬼！让我给你拆解一下问题出在哪，以及怎么解决：

为什么你的else语句失效？ #

你大概率是直接通过element.style.backgroundColor来判断当前颜色，比如写了类似这样的代码：

const myDiv = document.getElementById('your-div-id');
myDiv.addEventListener('click', function() {
  if (myDiv.style.backgroundColor === '#4aa3c3') {
    myDiv.style.backgroundColor = '#fafafa';
  } else {
    myDiv.style.backgroundColor = '#4aa3c3';
  }
});

问题出在：当你通过JS设置十六进制颜色值（比如#4aa3c3）时，浏览器会自动把它转换成RGB格式（比如rgb(74, 163, 195)）存储在style.backgroundColor里。所以当你第二次点击时，判断条件myDiv.style.backgroundColor === '#4aa3c3'永远不成立，代码只会一直执行else分支，自然无法恢复原来的颜色。

靠谱的解决方案 #

方案1：用CSS类切换（最推荐） #

这种方式既简洁又避免了颜色格式的坑，是前端开发中切换样式的标准做法：

首先在CSS里定义初始样式和激活样式：

#your-div-id {
  background-color: #fafafa;
  /* 可以加些其他样式让点击更明显，比如cursor: pointer; */
}
#your-div-id.active {
  background-color: #4aa3c3;
}

然后JS只需要切换类即可：

const myDiv = document.getElementById('your-div-id');
myDiv.addEventListener('click', function() {
  this.classList.toggle('active');
});

classList.toggle()会自动帮你判断：如果元素有active类就移除，没有就添加，完美实现切换效果。

方案2：用变量跟踪状态 #

如果不想改CSS，可以用一个变量来记录当前的激活状态，不用依赖style的值判断：

const myDiv = document.getElementById('your-div-id');
let isBgActive = false; // 初始状态为未激活

myDiv.addEventListener('click', function() {
  if (isBgActive) {
    this.style.backgroundColor = '#fafafa';
    isBgActive = false;
  } else {
    this.style.backgroundColor = '#4aa3c3';
    isBgActive = true;
  }
});

这种方式通过变量控制状态，完全避开了浏览器颜色格式转换的问题。

方案3：判断RGB格式（不推荐，兼容性稍差） #

如果你非要直接判断颜色值，可以用getComputedStyle获取实际生效的颜色，然后判断对应的RGB值：

const myDiv = document.getElementById('your-div-id');
myDiv.addEventListener('click', function() {
  const currentColor = window.getComputedStyle(this).backgroundColor;
  // 注意不同浏览器的RGB格式可能有细微差异，比如是否带空格
  if (currentColor === 'rgb(74, 163, 195)' || currentColor === 'rgb(74,163,195)') {
    this.style.backgroundColor = '#fafafa';
  } else {
    this.style.backgroundColor = '#4aa3c3';
  }
});

不过这种方式要考虑浏览器兼容性，比如有些浏览器可能会返回带透明度的RGBA值，所以不如前两种方案稳妥。

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