HTML/CSS语句能否作为JavaScript条件？代码执行有效性问询

嘿，咱们直接说结论：这段代码没法实现你想要的效果，而且还有几个关键问题得掰扯清楚：

1. 赋值运算符 vs 比较运算符的致命错误 #

你代码里的if ( document.getElementById('box').style.background = "red")用的是=（赋值运算符），不是==或===（比较运算符）！这就导致：

• 不管元素原来的背景色是什么，进入判断时都会先把背景色强制设为red
• 赋值表达式的返回值是被赋的内容（也就是"red"），这是一个真值，所以if块一定会执行，最终元素背景会被改成yellow（哦对了，你代码里拼写成yello了，得改成yellow）

2. 用style属性获取样式的局限性 #

就算你把=改成===，还有个坑：element.style.background只能读取内联样式（也就是写在元素标签style属性里的样式）。如果你的前置条件是通过CSS类、外部样式表或者<style>标签设置的红色，那style.background会返回空字符串，根本拿不到实际渲染的背景色。

要获取元素最终显示的样式，得用window.getComputedStyle()方法。

修正后的代码示例 #

情况1：前置背景色是内联样式设置的 #

const box = document.getElementById('box');
// 把赋值改成严格比较运算符
if (box.style.background === "red") {
  box.style.background = "yellow"; // 修正拼写错误
} else {
  box.style.background = "green";
}

情况2：前置背景色是通过CSS类/样式表设置的 #

const box = document.getElementById('box');
const computedStyle = window.getComputedStyle(box);
// 注意getComputedStyle返回的颜色可能是rgb格式，要对应判断
if (computedStyle.backgroundColor === "rgb(255, 0, 0)") {
  box.style.background = "yellow";
} else {
  box.style.background = "green";
}

补充说明 #

另外要注意，不同浏览器返回的颜色格式可能有差异（有的是十六进制，有的是rgb），如果要更稳妥的判断，可以统一转换颜色格式后再做比较。

内容的提问来源于stack exchange，提问作者mp.jpeg