将style.backgroundColor赋值给变量后背景色切换失效，是什么原因？

核心原因 #

• document.body.style.backgroundColor 是字符串类型的基础数据类型，你将它赋值给变量x时仅做了值拷贝，没有持有DOM元素样式属性的引用。
• 后续修改x的值仅会改动这个独立变量存储的字符串内容，不会同步到DOM元素的样式上，因此背景色不会切换。

修复方案 #

你注释中可运行的代码是将DOM元素document.body的引用赋值给x，通过引用修改样式属性才会生效。如果要提取颜色值做判断，可以写成如下形式：

<script>
var myVar = setInterval(setColor, 300);
 
function setColor() {
  // 仅把颜色值提取出来做判断，赋值还是直接作用到DOM元素的样式属性上
  var currentBg = document.body.style.backgroundColor;
  document.body.style.backgroundColor = currentBg == "yellow" ? "pink" : "yellow";
}
</script>

补充提示：部分浏览器读取style.backgroundColor会返回RGB格式字符串（比如黄色会返回rgb(255, 255, 0)），直接和"yellow"做判断会匹配失败。你可以用自定义变量存储当前颜色状态，或者统一用RGB值做判断来规避这个问题。

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