JS实现过渡反转成功，为何另一种写法无法生效？

你遇到的问题主要有两个核心点，咱们一步步拆解清楚：

1. 条件判断用了赋值运算符而非比较运算符 #

你注释掉的代码里，这一行是最直接的错误：

if (dbclickre.style.backgroundColor = 'white') {

这里的=是赋值运算符，它会把'white'直接赋值给dbclickre.style.backgroundColor，然后整个表达式的返回值就是'white'（属于布尔真值），所以每次调用flipped函数时，条件永远为true，只会执行if分支，永远走不到else逻辑里。

正确的写法应该用严格相等运算符===来做判断：

if (dbclickre.style.backgroundColor === 'white') {

2. element.style只能读取行内样式，无法获取CSS类/ID应用的样式 #

就算你把赋值改成了比较，依然会有问题——因为dbclickre.style.backgroundColor只能读取直接写在元素style属性里的样式，而你通过#flipped .reverse {background: whitesmoke}设置的样式是通过CSS选择器应用的，不属于行内样式，所以dbclickre.style.backgroundColor在第一次点击后依然会是初始值（可能是空字符串或浏览器默认值），根本无法正确判断元素当前的背景色状态。

如果一定要通过样式状态来判断，你需要用window.getComputedStyle()获取元素实际生效的样式：

const computedStyle = window.getComputedStyle(dbclickre);
// 注意：浏览器会把white转成rgb格式返回
if (computedStyle.backgroundColor === 'rgb(255, 255, 255)') { 
  document.querySelector(".linkrec").setAttribute("Id", "flipped");
} else {
  document.querySelector(".linkrec").removeAttribute("Id", "flipped")
}

不过这种方法并不推荐，因为不同浏览器返回的颜色格式可能不一致（比如有的返回十六进制，有的返回RGB），而且性能和维护性都不如用状态变量或类切换的方式。

更简洁可靠的替代方案 #

其实你最开始用布尔变量dbclickre控制切换的方法就很靠谱，另外也可以用classList.toggle()来实现，代码会更简洁：

function flipped() {
  document.querySelector(".linkrec").classList.toggle("flipped");
}

记得把CSS里的#flipped改成.flipped（用类选择器代替ID选择器，ID应该保持唯一性，类切换更灵活）：

.flipped .reverse {
  background: whitesmoke;
  /* 你的过渡动画样式 */
}

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